Question

我试图让子组件知道它应该在父母改变之后更新其状态。

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

到目前为止，我只能在＆＃34; React＆＃34;中通过componentWillReceiveProps并发送一些任意道具（如数字）来让孩子知道它应该调用设置状态的功能。

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

总结如下：

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

任何人都可以帮我找出最佳方法吗？

正如您在代码段中看到的，这或多或少都是这种情况。我想知道当子道具更改时，让Child组件调用_updateState函数的最佳方法（现在不会在代码片段中发生）。

＆＃13;

//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'));

＆＃13;

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

＆＃13;

编辑：添加了代码段。

Answer 1

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

请参阅以下小提琴

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

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

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

1 个答案: