Question

根据https://facebook.github.io/react/tutorial/tutorial.html的反应教程：

当您想要聚合来自多个孩子的数据或拥有两个孩子时子组件相互通信，向上移动状态这样它就存在于父组件中。然后父母可以通过状态通过道具回到孩子身上，让孩子组件始终彼此同步并与父组件同步。

这似乎与良好的OOP实践相矛盾，其中每个对象都维护自己的状态。

Answer 1

当您想要聚合来自多个孩子的数据或拥有两个孩子时子组件相互通信，向上移动状态这样它就存在于父组件中。然后父母可以通过状态通过道具回到孩子身上，让孩子组件始终彼此同步并与父组件同步。

考虑一个父有两个孩子的情况，其结构如下

<Parent>
    <Child1/>
    <Child2/>
</Parent>

现在Child1只有input组件，Child2显示在输入中输入的内容

在这种情况下，如果您在Child1中保留输入的值，则无法从Parent访问它，因为状态是组件的本地状态并且是私有属性。因此，将属性保留在父级中然后将其作为道具传递给子级以便两个孩子都可以使用它是有意义的

示例代码段

＆＃13;

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

＆＃13;

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

＆＃13;

为什么React教程建议子组件状态存储在父组件中？

1 个答案: