在来自单独组件的 React class 上使用方法

Question

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

在另一个页面上，我点击了一个 'back' 按钮，它应该会转到主页路线，但是在页面加载时打开此菜单，而不是在我点击时打开。目前我只有：

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

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

Answer 1

如果您想要那种情况，请将状态值传递给父组件，该组件是 'smart component' 管理哑组件的组件。或者你可以使用 'flux' / 'redux'.

Answer 2

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)等

更多阅读在这里：

https://medium.com/@dan_abramov/mixins-are-dead-long-live-higher-order-components-94a0d2f9e750#.sh6m9c9ct

在来自单独组件的 React class 上使用方法

Using a method on a React class from a separate component

ecmascript-6

reactjs

react-router