划分React.js组件

Question

This is my Navigation component

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;

As you can see, this Navigation component is doing way too many things. I want to divide it up, but when I try, I realize there is a lot of linkage in it.

For example I tried taking the Modal to a separate component, but then I'd need to move all login logic into it, so I figured it's kind of pointless, since to use the user in the Navigation component I'd need to just move the whole code to the new file, thus just recreating the issue.

I know this is a wrong way of writing code, and I'm not asking to rewrite it for me, but if someone who went through it could give me a couple of tips on how to divide it, I could do it myself.

What I was thinking: Move Modal to a different component and move all login and logout logic to a different component. The problem is I linked it all in one file. How can I get around it now?

By linkage I mean I'm using one state object for everything here.

Answer 1

A common pattern you will see in many react projects is to separate Container Components from Presenter Components. In your case, it would be fairly easy to strip out some Presenter Components to break you app up.

Read the docs, especially Lifting State Up and Thinking in React if you have not already done so. It explains theses concepts really well.

Answer 2

You could split modal out into a separate component and pass the information it requires in through as props eg. this.login , this.handleClose and this.state.show . Such as:

<ModalComponent show={this.state.show} close={this.handleClose} login={this.login} />

Then the logic to perform the login in the navigation component could be moved to a service and the service methods could be passed in as props instead of them living on the Navigation component if this is needed.

You could modify the login method to take the username and password as parameters. And then on the button click to login pass those values in.