Question

我的父组件是一个React类，其中有一个方法可以执行setInterval（除此之外）。满足某些条件时，将清除此间隔。

但是我希望在其中一个子节点调度特定操作（从而重新设置setInterval）时再次调用父React类的此方法。

如何通知家长孩子已派出某项（Redux）行动？我使用connect来传递状态。所以父母和子女共享相同的调度方法。

Answer 1

不确定这是否是您问题的最佳解决方案，但是如何将回调传递给子组件并从父组件调度redux操作？你也可以清除那里的间隔。

Answer 2

实际上，您可以将send动作方法从父级传递给子级，在this.props.someMethodToDispatch()之类的子组件中调用它，并在分派操作之前在父组件中执行某些操作。例如：

const dispatch = (action) => console.info("Action dispatched", action);

class Parent extends React.Component {

  constructor(props) {
    super(props);
    this._handleChildClick = this._handleChildClick.bind(this);
  }
  
  _handleChildClick(action) {
    // You can do something here
    console.info("Child pass action", action);
    // And after that dispatch action
    dispatch(action);
  }

  render() {
    return (
      <div>
        <h2>Simulate handle action from child</h2>
        <Child handleClick={this._handleChildClick} />
      </div>
    );
  }
}

class Child extends React.Component {

  _generateAction() {
    // This is action creator mock
    return {type: "SOME_ACTION", payload: "someting"};
  }

  render() {
    return (<button onClick={() => this.props.handleClick(this._generateAction())}>Click me</button>);
  }
}

ReactDOM.render(<Parent />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

Redux：子组件调度Redux操作时通知父React组件

2 个答案: