反应...从状态设置子属性

Question

我读到过从 props 设置状态是一种反模式，但是从状态设置子属性呢？这段代码可以吗，或者有没有更好的做法。

假设我们有一个保存和更改其状态的 APP 组件。将该状态作为道具传递给子显示组件是一种好习惯吗？

   var APP = React.createClass({

   getInitialState() {
       return {
           items: [1,2,3],
           title: 'Simple Sample'
       };
   },

   render() {
       return <div>
           <Display title={this.state.title} />
           <List items={this.state.items} />
       </div>
   }
});

像这样的事情怎么样：

   var APP = React.createClass({

   getInitialState() {
       return {
           items: [1,2,3],
           title: 'Simple Sample'
       };
   },

   render() {
       return <div>
           <DisplayList {...this.state} />
       </div>
   }
});

Answer 1

将 parent 的 state 传递给 child 的 props 是与 children 通信的主要方式。将函数引用传递给 child 的 props 是允许 child 与 parent.

通信的主要方式

我个人避免使用 <DisplayList {...this.state} /> 模式，因为我更喜欢明确说明 DisplayList 的 API 以及需要传递哪些道具。当您稍后添加另一个变量时，传递整个状态可能会导致细微的错误。

您提到的反模式是可能采用组件的props并将它们复制到同一组件的state的模式——然后变得更加困难找出谁拥有数据，以及您是应该调用 setState 还是调用 this.props.

上的某些方法

反应...从状态设置子属性

React... setting child Properties from State

javascript

reactjs

ecmascript-6

react-jsx