根据https://facebook.github.io/react/tutorial/tutorial.html上的 React 教程：
当您想要聚合来自多个子组件的数据或让两个子组件相互通信时，请向上移动状态，使其位于父组件中。然后父组件可以通过 props 将状态传递回子组件，以便子组件始终相互同步并与父组件同步。
这似乎与每个对象都维护自己状态的良好 OOP 实践相矛盾。
为什么 React 教程建议将子组件状态存储在父组件中？
IT技术
javascript
reactjs
oop
2021-05-04 07:09:35
1个回答
当您想要聚合来自多个子组件的数据或让两个子组件相互通信时，请向上移动状态，使其位于父组件中。然后父组件可以通过 props 将状态传递回子组件，以便子组件始终相互同步并与父组件同步。
考虑一个 Parent 有两个孩子的情况，结构如下
<Parent>
<Child1/>
<Child2/>
</Parent>
现在Child1只有input组件，并Child2显示在输入中输入的内容说
在这种情况下，如果您将输入的值保留在 Child1 中，则无法从 Parent 访问它，因为 state 是组件本地的并且是私有属性。因此，将属性保留在 parent 中，然后将其作为 props 传递给 child 以便两个孩子都可以使用它是有意义的
示例代码段
class Parent extends React.Component {
constructor(props) {
super(props);
this.state = {
inputVal: ''
}
}
handleChange = (val) => {
this.setState({inputVal: val});
}
render() {
return (
<div>
<Child1 handleChange={this.handleChange} inpVal={this.state.inputVal}/>
<Child2 value={this.state.inputVal}/>
</div>
)
}
}
class Child1 extends React.Component {
render() {
return (
<div>
<input type="text" value={this.props.inpVal} onChange={(e) => this.props.handleChange(e.target.value)} />
</div>
)
}
}
class Child2 extends React.Component {
render() {
return (
<div>
{this.props.value}
</div>
)
}
}
ReactDOM.render(<Parent/>, document.getElementById('app'));<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="app"></app>其它你可能感兴趣的问题