>

이것은 내 Navigation 입니다  구성 요소

import React from 'react';
import {Navbar, Nav, NavItem, Modal, Button, FormControl} from 'react-bootstrap';
import {BrowserRouter, Link, Route, Switch} from 'react-router-dom';
import Questions from './Questions';
import {About} from './About';
import {Home} from './Home';
import {LinkContainer} from 'react-router-bootstrap';
import Question from './Question';
import firebase from '../firebase';
class Navigation extends React.Component {
    constructor(props) {
        super(props);
        this.state = {};
        this.login = this.login.bind(this);
        this.logout = this.logout.bind(this);
        this.openLogin = this.openLogin.bind(this);
        this.handleClose = this.handleClose.bind(this);
    }
    componentDidMount() {
        firebase.auth().onAuthStateChanged(user => {
            if (user) {
                console.log(user);
                this.setState(
                    {
                        user: user
                    }, () => this.props.checkUserState(this.state.user)
                );
            }
        });
    }
    logout() {
        firebase.auth().signOut()
            .then(() => {
                this.setState({
                    user: null
                }, function () {
                    this.props.checkUserState(this.state.user)
                });
            });
    }
    login() {
        var email = document.getElementById('email').value;
        var password = document.getElementById('password').value;
        firebase.auth().signInWithEmailAndPassword(email, password)
            .then(result => {
                    const user = result.user;
                    this.setState({
                            user: user,
                        },
                        function () {
                            this.props.checkUserState(this.state.user)
                        });
                    document.getElementById('close').click();
                    document.getElementById('questions').click();
                }
            ).catch(e => console.log(e));
    }
    openLogin() {
        this.setState({show: true});
    }
    handleClose() {
        this.setState({show: false});
    }
    render() {
        return (
            <React.Fragment>
                <BrowserRouter>
                    <React.Fragment>
                        <Navbar>
                            <Navbar.Header>
                                <Navbar.Brand>
                                    <Link id='home' to="/">UczIchApp</Link>
                                </Navbar.Brand>
                            </Navbar.Header>
                            <Nav>
                                <LinkContainer id='about' to='/about'>
                                    <NavItem>O nas</NavItem>
                                </LinkContainer>
                                {
                                    this.state.user ?
                                        <React.Fragment>
                                            <LinkContainer id="questions" to='/questions'>
                                                <NavItem>Zadania</NavItem>
                                            </LinkContainer>
                                            <NavItem onClick={this.logout}>Wyloguj się</NavItem>
                                        </React.Fragment>
                                        :
                                        <NavItem onClick={this.openLogin}>Zaloguj się</NavItem>
                                }
                            </Nav>
                        </Navbar>
                        <Switch>
                            <Route exact path="/about" component={About}/>
                            <Route exact path="/questions" component={Questions}/>
                            <Route exact path="/" component={Home}/>
                            <Route path='/question/:id' component={Question}/>
                        </Switch>
                    </React.Fragment>
                </BrowserRouter>
                <Modal
                    show={this.state.show}
                    onHide={this.handleClose}>
                    <Modal.Header
                        closeButton>
                        <Modal.Title> Modal
                            heading </Modal.Title>
                    </Modal.Header>
                    <Modal.Body>
                        <form>
                            <FormControl
                                id="email"
                                type="email"
                                label="Email address"
                                placeholder="Enter email"/>
                            <FormControl id="password" label="Password" type="password"/>
                            <Button onClick={this.login}>Zaloguj</Button>
                        </form>
                    </Modal.Body>
                    <Modal.Footer>
                        <Button id="close" onClick={this.handleClose}>Close</Button>
                    </Modal.Footer>
                </Modal>
            </React.Fragment>
        )
    }
}
export default Navigation;

보시다시피,이 Navigation  구성 요소가 너무 많은 일을하고 있습니다. 나누려고하지만 시도 할 때 많은 연관이 있음을 알고 있습니다.

예를 들어 나는 Modal 를 복용하려고  별도의 구성 요소에 대한 모든 로그인 논리를 이동해야하므로 user 를 사용하기 때문에 무의미하다고 생각했습니다.   Navigation 에서  구성 요소 전체 코드를 새 파일로 이동하여 문제를 재현하기 만하면됩니다.

이것은 코드를 작성하는 잘못된 방법이라는 것을 알고 있습니다. 저는아닙니다입니다. 나누는 방법에 대한 몇 가지 팁은 직접 할 수 있습니다.

내 생각 : Move Modal  다른 구성 요소로 이동하고 모든 로그인 및 로그 아웃 로직을 다른 구성 요소로 이동하십시오. 문제는 하나의 파일로 모두 연결했다는 것입니다. 지금 어떻게 해결할 수 있습니까?

연결을 통해 여기 모든 것에 하나의 상태 객체를 사용하고 있음을 의미합니다.

  • 답변 # 1

    모달을 별도의 컴포넌트로 나누고 필요한 정보를 소품 등으로 전달할 수 있습니다. 와이즈 비즈 this.login  그리고 this.handleClose . 예를 들면 :

    this.state.show
    
    

    그러면 탐색 구성 요소에서 로그인을 수행하는 논리를 서비스로 옮길 수 있으며 필요한 경우 서비스 구성 요소를 탐색 구성 요소 대신 소품으로 전달할 수 있습니다.

    <ModalComponent show={this.state.show} close={this.handleClose} login={this.login} /> 를 수정할 수 있습니다  사용자 이름과 비밀번호를 매개 변수로 사용하는 방법입니다. 그런 다음 버튼을 클릭하여 로그인하여 해당 값을 전달하십시오.

  • 답변 # 2

    많은 반응 프로젝트에서 볼 수있는 일반적인 패턴은 컨테이너 구성 요소를 발표자 구성 요소와 분리하는 것입니다. 귀하의 경우 일부 발표자 구성 요소를 제거하여 앱을 분리하는 것이 매우 쉽습니다.

    문서, 특히 리프팅 스테이트 업 및 리 액트 생각을 아직 읽지 않았다면 읽으십시오. 이 개념들을 잘 설명해줍니다.

    login

관련 자료

  • 이전 vue.js - 확장 패널 Vuetify
  • 다음 javascript - jQuery는 배열의 값을 텍스트 상자에 넣지 만 쉼표는 넣지 않습니다