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;

Answer 2

由于注销逻辑不依赖Home组件，因此不需要重复所有逻辑。

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

const nextPage = () => {
    return(
        <Aux>
            <LogoutButton onClick={fire.auth().signOut} />
        </Aux>
    );
}

导出默认的nextPage;

或者，如果fire.auth()可能是一个昂贵的函数，则可以这样编写：

onClick={() => fire.auth().signOut()}

Answer 3

为什么不将fire.auth().signOut();行移出注销按钮？

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

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

export default logoutButton;

除非我丢失了某些东西，否则Home组件中唯一使用fire的地方就是那个。为什么不将其放在注销组件中？

此外，您现在不需要通过它作为道具，并且在放置它的任何地方它的行为都一样

Answer 4

您可以将Home中的函数作为道具传递给NextPage，例如

<NextPage goToNextPage={this.goToNextPage} />

然后在NextPage内调用props.NextPage()

此外，如果您将goToNextPage函数编写为箭头函数，则无需绑定它

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

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

4 个答案: