我可以将setState从父组件传递到子组件吗？

Question

React的文档建议将函数作为属性传递给子组件，以更改父组件的状态变量。 我发现这种设计对于拥有许多不同孩子组件的父母来说有些混乱。

我开始这样做：

constructor(props) {
  super(props);
  const that = this;
  this.state = {
    parentData : '',
    setState : function(obj) { // <--
      that.setState(obj)
    }
  };
}
render() {
  <Child prop={this.state} />
}

然后在孩子中，当我需要更改父状态时：

childFunction() {
  props.setState({ parentData: 'new data'})
}

此实施有​​任何不利之处吗？

Answer 1

您实际上不应该做的一件事是将该函数存储在父组件的state上，但是将函数从父组件传递给子组件，这可能最终更新父组件的状态，这是React中有效且经常使用的模式。

 const Child = ({ updateParent }) => ( <div id="child"> <button onClick={() => updateParent(Math.random())}> Update Parent </button> </div> ); class Parent extends React.Component { constructor(props) { super(props); this.state = { data : '' }; } render() { return ( <div id="parent"> <h3>Data: {this.state.data}</h3> <Child updateParent={(data) => this.setState({ data })} /> </div> ) } } ReactDOM.render( <Parent />, document.querySelector('#example') ) 

 #parent { height: 150px; padding: 5px; background: olivedrab; color: #fff; } #parent:before { content: 'Parent'; } #child { color: #000; padding: 5px; height: 50px; background: lightgreen; } #child:before { content: 'Child'; } 

 <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="example"></div> 

Answer 2

一个很大的缺点是，一旦应用程序开始增长，就很难追踪状态的更新位置。