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

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

我开始这样做：

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

---

此实现有任何缺点吗？

您不应该做的一件事是将此函数实际存储在父组件的

状态上，但将函数从父组件传递给子组件，最终可能会更新父组件的状态，这是React中有效且使用的模式


constchild=（{updateParent}）=>(
updateParent（Math.random（））}>
更新父项
);
类父类扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
数据：“”
};
}
render（）{
返回(
数据：{this.state.Data}
this.setState（{data}）}/>
)
}
}
ReactDOM.render(
,
document.querySelector（“#示例”）
)
#父级{
高度：150像素；
填充物：5px；
背景：橄榄色；
颜色：#fff；
}
#家长：以前{
内容：“家长”；
}
#孩子{
颜色：#000；
填充物：5px；
高度：50px；
背景：浅绿色；
}
#孩子：以前{
内容：“儿童”；
}

一个很大的缺点是，一旦应用程序开始增长，就很难跟踪状态更新的位置。
您应该将状态保持在各个组件的本地状态。我非常熟悉这种模式，我的应用程序的各个部分都使用它。传递setState是否会对性能/并发性等产生负面影响？如果您是指直接传递
setState
，那将不会真正起作用，因为单独传递函数会使其中的
不再指向react组件，而是指向其他组件（取决于在子级中调用函数的方式）. 这就是你传递包装器函数的原因之一；我在父级的构造函数中设置
that=this
（请参阅相关代码），然后使用
that.setState（…）
使
this
绑定到适当的范围。在这种情况下，与我的示例没有区别，两者都使用包装函数。唯一的区别是在state对象本身上有包装器函数，这是没有意义的，因为函数不是随时间而修改的状态
childFunction() {
  props.setState({ parentData: 'new data'})
}