时间戳

首页 > 解决方案 > 我的组件如何在不重复代码的情况下在另一个组件中工作？

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

问题描述

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

换句话说，在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;

标签： javascriptreactjs

解决方案

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

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;

推荐阅读