为什么我不能在react.js中更新道具？

Question

为什么我们同时拥有state和props？为什么我们不只有一个数据源？我想更新组件的组件props，并使其重新呈现其自身及其所有子组件。看起来很简单，但我不知道如何让组件更新其自身或父项的道具。谢谢你的帮助。

Answer 1

React的哲学是道具应该是不变的并且自上而下的。这意味着父母可以将喜欢的任何道具值发送给孩子，但是孩子不能修改自己的道具。您要做的是对传入的道具做出反应，然后根据需要修改孩子的状态。

因此，您永远不会更新自己的道具或父母的道具。曾经 您只能更新自己的状态，并对父母给您的prop值做出反应。

如果您想让某个子动作发生，而该子动作会修改状态中的某些内容，那么您要做的就是将回调传递给该子动作，该子动作可以在给定的动作上执行。然后，此回调可以修改父级的状态，从而可以在重新渲染时向子级发送不同的道具。

Answer 2

组件本身会更改其状态，并且不会更改其自身，而是会更改儿童的道具。

<Parent>

  <Child name={ this.state.childName } />

</Parent>

父母可以更改自己的状态并更改孩子的名字，但这会更改其孩子的道具。

edit1：要从子级向父级调用事件，您应该向子级传递一个事件处理程序，如下所示：

var Child = React.createClass({

  render: function() {

    return (<button onClick={ this.props.onClick }>Hey</button>);

  }

});

var Parent = React.createClass({

  onChildClick: console.log.bind(console), // will print the event..

  render: function() {

    return (<Child onClick={ this.onChildClick } />);

  }

});

React.renderComponent(<Parent />, document.body);

在此代码中，当您单击“子级”按钮时，它将把事件传递给其父级。传递事件的目的是使组件分离。也许在您的应用程序中您需要执行此特定操作，但是在另一个应用程序中，您将有不同的用法。