Question

我有一个组件Layout（layout.js），

 logout(){
        var _that = this;

    /***** fetch API for logout starts **********/

    fetch(Constants.SERVER_URL + '/api/v1/auth/logout/', {
        method: 'GET',
        headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/json',
            'Authorization': _that.state.userData.token
        },
    }).then(function (response) {
        let responseData = response.json();
        responseData.then(function (data) {
            if (data.status == 200) {

                localStorage.removeItem('token');
                localStorage.removeItem('fullname');
                localStorage.removeItem('email');
                _that.updateAuthState();

                setTimeout(function () {
                    _that.props.history.push("/sign-in");
                }, 2000);

            } else if (data.status == 401) {

                localStorage.removeItem('token');
                localStorage.removeItem('fullname');
                localStorage.removeItem('email');
                _that.updateAuthState();

                setTimeout(function () {
                    _that.props.history.push("/sign-in");
                }, 2000);
            } else {
                Alert.success('<h4>' + Message.SIGNOUT.SUCCESS + '</h4>', {
                    position: 'top-right',
                    effect: 'slide',
                    beep: false,
                    timeout: 2000
                });

                localStorage.removeItem('token');
                localStorage.removeItem('fullname');
                localStorage.removeItem('email');
                _that.updateAuthState();

                setTimeout(function () {
                    _that.props.history.push("/sign-in");
                }, 2000);
            }
        })
    }).catch(function (error) {

        }
    });

    /***** fetch API for logout ends **********/
}`

并且我需要在另一个组件中使用此功能，而又不传入道具，那么我该如何访问此功能。有什么方法可以导出此功能并将其导入另一个组件。请帮我解决一下这个。谢谢

Answer 1

反之亦然。将您的logout方法提取到外部函数中。需要使用它的组件可以导入该功能。

Answer 2

使用HOC（高阶组件），例如以下示例：How to make React HOC - High Order Components work together?，因此您可以通过以下方式在其他组件中使用注销：

import WithLogout from './WithLogout'

class OtherComponent extends React.Component {
  handleLogoutClick = () => {
    this.props.onLogout()
  }

  render() {
    ...
  }

}

export default WithLogout(OtherComponent);

logout等同于示例的update方法。

ReactJS：将功能从一个有状态的组件导出到另一个有状态的

2 个答案: