从其他组件分派动作时触发函数

Question

我正在开发一个 reactjs 应用程序并使用 redux。我有两个组件。说组件 A 和 组件 B。在组件 A 中，我有一张桌子。当我单击任何行时，我将使用行的数据作为该操作的参数调度一个操作。每次单击一行时，都会调度此操作。每当单击一行并调度该操作时，我想触发组件 B 中的一个函数。我该怎么做？

通常我们通过 action dispatch 更改 reducer 中的数据，然后将这些数据用作其他组件中的状态。但是这里我想在组件 A 的表中单击一行时触发组件 B 中的一个函数。

Answer 1

单击行时在 A 中调度一个操作，将布尔值设置为 true。然后使用 mapStateToProps 在 Redux 状态更改时重新渲染组件。然后在componentDidUpdate()内部对所需函数进行条件调用：

class B extends React.Component {
  componentDidUpdate() {
    const { rowClickedInAComponent } = this.props;
    if ( rowClickedInAComponent ) {
      functionToBeCalled();
    }
  }
  render() {
  }
}

const mapStateToProps = (state) => ({
  rowClickedInAComponent: rowClickedInAComponent
  // boolean here, you could pass any info such as which row was clicked
});

export default connect(mapStateToProps)(ListingPage);

如果您需要进一步说明，请发表评论。

Answer 2

您可以通过以下几种方式实现这一目标。

i) 如果存在 父子 关系，只需将 activeRow 函数作为子组件的 props 传递

  class ComponentA extends React.component{

  render(){
    return(
    {/*view, could be table, section, div, etc.*/}
      <div>
        <button onClick={this.props.handler}>Click me</button>
      </div>
    )
  }
}

class ComponentB extends React.component{

  handleClick(){
    //do something.
    console.log("clicked!");
  }
  
  render(){
    return(
    {/*view, could be table, section, div, etc.*/}
      <div>
        <ComponentA handler={this.handleClick}/>
      </div>
    )
  }
}

ii) 使用 redux，在 redux 状态下创建一个 activeRow 键，并使用 react-redux's connect 方法创建 subscribe componentB。
现在在componentB 添加componentWillReceiveProps 生命周期钩子，并在componentWillReceiveProps 里面做一些事情
例如：

componentWillReceiveProps(nextProps){
  //first parameter is updated props.
  //check this.props with nextProps.
  //do something here.
}