让孩子知道它应该在 React 中更新其状态

Question

我试图让子组件知道它应该在父组件中的 prop 更改后更新其状态。

没有需要在两者之间共享的状态。唯一需要做的是父母应该以某种方式让孩子知道它需要更新其状态（字面意思是使用它已经拥有的信息单独调用setState）。

到目前为止，我只能通过componentWillReceiveProps 以“React”方式进行操作，并发送一些任意道具，例如数字，让孩子知道它应该调用该函数来设置状态。

另一种方法是使用信号让孩子知道，但对于这种情况，这似乎有点过头了。

总之：

• 父母需要让孩子知道它应该调用一个函数
• 该函数将更新孩子的状态（setState）
• 孩子不需要从父母那里收到任何信息

谁能帮我找出最好的方法来做到这一点？

正如您在 sn-p 中看到的，或多或少是这种情况。我想知道当 Parent 道具发生变化时让 Child 组件调用 _updateState 函数的最佳方法（现在在 sn-p 中不会发生）。

//Imagine this is the redux-container that passes the store state to the parent.
class ParentWrapper extends React.Component {
  constructor(){
    super();
    
    this.state = {status: 'normal'};
  }
  
  //This would be an action to the reducer that would update the store state
  _updateStatus(){
    this.setState({status: 'updated'});
  }
  
  render(){
    return (
      <div>
        <button onClick={this._updateStatus.bind(this)}>Click me</button>
      
        <Parent status={this.state.status} />
      </div>
    );
  }
}

class Parent extends React.Component {
  render(){
    return (
      <div>
        <Child />
      </div>
    );
  }
}

Parent.propTypes = {
  status: React.PropTypes.string
};

Parent.defaultProps = {
  status: 'normal'
};

class Child extends React.Component {
  constructor(){
    super();
    
    this.state = { test: 1 };
  }
  
  _updateState(){
    this.setState({test: this.state.test + 1});
  }
  
  render(){
    return (
      <div>Child: {this.state.test}</div>
    );
  }
}

ReactDOM.render(<ParentWrapper />,    document.getElementById('container'));

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

<div id="container"></div>

编辑：添加了 sn-p。

Answer 1

您可以使用refs 访问子组件下的所有方法。

看下面的小提琴

https://jsfiddle.net/pranesh_ravi/412j5ucw/

这里使用refs，我在child 中调用了一个函数，它将改变child 组件的状态。