Question

单击组件B中的按钮时，在组件A中调用方法的最佳方法是什么？

两个组件彼此分开。我相信我可以使用一些非常天真的实现，例如：

组件A发送操作：

{action: "BUTTON_CLICKED", value: true}

减速机捕获行动：

case "BUTTON_CLICKED": {
        const newState = { ...state };
        newState.clicked = true;
        return newState;
    }

组件B听道具::

componentWillReceiveProps = (newProps) => {
    if (newProps.clicked) {
        someMethod()
    }
};

并重置标志：

someMethod = ()=>{
   dispatch({action: "BUTTON_CLICKED", value: false})
}

但这种方式错了。

在react / redux中实现命令模式的任何方法？

感谢

Answer 1

＆＃34;单击组件B中的按钮时，在组件A中调用方法的最佳方法是什么？＆＃34;

我使用事件总线消息传递来在模块之间进行通信。您确实在一个模块和其他模块中发出事件来侦听特定事件。

示例：https://github.com/olahol/react-bus

以下是与VueJS相关的文章http://vuetips.com/global-event-bus，但它应该概述一下这个想法。

Answer 2

你提出的问题和尝试解释是最好的模式。你已经写了正确的代码，我认为你不需要改变它。

看到你在单一事实来源的帮助下使用Redux。所以无论你使用什么，根据我的观点是正确的。

Answer 3

您所采用的方法似乎是正确的。 Redux内置了此功能。您可以使用store.subscribe收听更改。

componentWillMount() {
  this.unsubscribe = store.subscribe(this.onStoreChange);
}

componentWillUnmount() {
  this.unsubscribe();
}

onStoreChange = () => {
  const newState = store.getState();

  // Check if target value has changed here
}

从其他组件调用组件方法

3 个答案: