ReactJS: функция экспорта из одного компонента с отслеживанием состояния в другой

У меня есть макет компонента (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 **********/
}`

и мне нужно использовать эту функцию внутри другого компонента, не переходя в реквизиты, как я могу получить доступ к этой функции. Есть ли способ экспортировать эту функцию и импортировать ее в другой компонент. Пожалуйста, помогите мне с этим. Спасибо

🤔 А знаете ли вы, что...
React - это библиотека JavaScript, разработанная компанией Facebook.


2
860
2

Ответы:

Используйте HOC (компонент более высокого порядка), как в этом примере: Как заставить React HOC - компоненты высокого порядка работать вместе? Таким образом, вы можете использовать выход из системы в другом компоненте следующим образом:

import WithLogout from './WithLogout'

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

  render() {
    ...
  }

}

export default WithLogout(OtherComponent);

Где logout эквивалентен методу update в примере.


Будет проще сделать наоборот. Извлеките ваш метод logout во внешнюю функцию. Компоненты, которые должны его использовать, могут импортировать функцию.