使用来自单独组件的 React 类上的方法答案

【问题标题】：Using a method on a React class from a separate component使用来自单独组件的 React 类上的方法
【发布时间】：2016-07-07 23:32:34
【问题描述】：

在我网站的主页上，您可以单击一个菜单按钮，该按钮触发一个切换菜单的方法。这会将状态从 menuOpen 从 false 更改为 true。

在不同的页面上，我单击“返回”按钮，它应该会转到主路径，但在页面加载时打开此菜单，而不是在单击时打开。目前我只有：

handleBack(){
   App.navigate('/');
}

我可以import 组件并调用它的方法吗？或者我可以设置一个新的 React Router 路由以某种方式执行状态更改？还是有别的办法？

【问题讨论】：

设置工作 js fiddle。那么，我们可能会为您提供帮助。

标签： reactjs ecmascript-6 react-router

【解决方案1】：

Redux 会有所帮助，但由于我猜你没有使用它，或者你不想重构整个应用程序来设置这个布尔值，我建议使用更高阶的组件。

例如，您可以像这样定义一个高阶组件（想想超类）：

export function menuToggler(ComposedComponent) {

    return class extends React.Component {
        toggleMenuBoolean() {
            // code here
        },
        render() {
            return <ComposedComponent toggleMenuBoolean={toggleMenuBoolean} {...this.props} />
        }
    };
}

然后，在您的常规组件中，您只需用高阶组件包装它。因此，如果以前，您使用 ES6 并像这样导出组件：

export default MyComponent;

它会变成：

export default menuToggler(MyComponent);

从那里，您可以从任何被您的高阶组件包装的组件调用此 toggleMenuBoolean 函数，只需在 props 上调用它：

this.props.toggleMenuBoolean(false)等

【讨论】：

【解决方案2】：

如果您想要这种情况，请将状态值传递给作为“智能组件”管理哑组件的父组件。或者你可以使用 'flux' / 'redux'。

【讨论】：