Question

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

通常我们通过操作调度更改reducer中的数据，然后将该数据用作其他组件中的状态。但是，只要在组件A的表中单击一行，我就想在组件B中触发一个函数。

Answer 1

单击行时在A中调度操作，将布尔值设置为true。然后使用-c save pop -f在Redux状态更改时重新呈现组件。然后在mapStateToProps：

中对所需函数进行条件调用

componentDidUpdate()

如果您需要进一步澄清，请注释。

Answer 2

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

i）如果有父子关系，只需将activeRow函数作为子组件props传递

＆＃13;

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

＆＃13;

ii）使用redux，使用 react-redux activeRow方法在redux状态和subscribe componentB中创建connect键。
现在在componentB添加componentWillReceiveProps生命周期挂钩，并在componentWillReceiveProps内部执行操作例如：

＆＃13;

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

＆＃13;

从其他组件调度操作时触发函数

2 个答案: