javascript - 我的组件如何在不重复代码的情况下在另一个组件中工作？

Question

如何在不重复代码的情况下让我的组件在另一个组件中工作？

换句话说，在NextPage.js里面文件，<LogoutButton/>组件不会执行它的功能？我想要 <LogoutButton/>执行与 <Home/> 内部完全相同的功能成分。

有没有办法不用 NextPage.js 来做到这一点？基于类的组件并在内部重复相同的逻辑 NextPage.js成分？

这是 Home.js文件:

import React, {Component} from 'react';
import fire from '../../config/Fire';
import classes from './Home.css';
import Aux from '../../hoc/Aux';
import NextPage from '../../components/nextpage/NextPage';
import LogoutButton from '../../UI/buttons/LogoutButton';

class Home extends Component {

    state = {
        flag: false
    }

    logout() {
        fire.auth().signOut();
    }

    goToNextPage() {
        this.setState({flag: true});
    }

    render() {
        const flag = this.state.flag;

        if(flag) {
            return <NextPage/>;
        }

        return (
            <Aux>
                <button
                type="button"
                className="btn btn-outline-primary btn-lg btn-block"
                onClick={this.goToNextPage.bind(this)}>some button
            </button>

                <LogoutButton clicked={this.logout.bind(this)}/>
                <NextPage/>
            </Aux>
        );
    }
}

export default Home;

这是 NextPage.js文件:

import React from 'react';
import Aux from '../../hoc/Aux';
import LogoutButton from '../../UI/buttons/LogoutButton';

const nextPage = () => {
    return(
        <Aux>
            <LogoutButton/>
        </Aux>
    );
}

export default nextPage;

这是 LogoutButton.js文件:

import React from 'react';
import classes from '../../UI/buttons/LogoutButton.css';
import Aux from '../../hoc/Aux';

const logoutButton = (props) => (
    <Aux>
        <button
            className={classes.LogoutButton}
            onClick={props.clicked}>Logout
        </button>
    </Aux>
);

export default logoutButton;

Answer 1

您可以将注销逻辑移动到注销按钮组件中。当您的注销逻辑变得复杂时，函数处理程序会更好。

import React from 'react';
import classes from '../../UI/buttons/LogoutButton.css';
import Aux from '../../hoc/Aux';
import fire from '../../config/Fire';

const handleLogout = () => {
    fire.auth().signOut();
}

const logoutButton = (props) => (
    <Aux>
        <button
            className={classes.LogoutButton}
            onClick={handleLogout}
        >
        Logout
        </button>
    </Aux>
);

export default logoutButton;