javascript - React的setProps()已弃用警告

在父组件App中，我渲染子组件PersonsTable：

  var App = React.createClass({
    addPerson: function() {
      // building personToAdd object and passing to personsTable...
      this.refs.personsTable.setState({personToAdd: person});
    },

    render: function() {
      return (
        <div>
          <PersonsTable ref="personsTable" />
          ...
        </div>
      );
    },
  });

现在，我通过调用PersonsTable的setState方法来传递一个新对象。
如果我调用setProps方法，它将返回警告


  未捕获的恒定变量：setProps（...）：您在具有父级的组件上调用了setProps。这是一种反模式，因为道具在渲染时会得到反应性的更新。而是，更改所有者的render方法，以将正确的值作为prop传递给创建它的组件。


如何不使用setState方法将此类对象正确传递给PersonsTable？

这是完整的代码https://jsfiddle.net/jpt5uy1k/

最佳答案

看来您正在尝试通过在ref上调用setState来实现反模式。最好将道具传递给孩子并使用它们。如果需要状态，请将其设置为父级，然后将其作为道具传递。

    <div>
      <PersonsTable aProp={someCoolInfoOrParentState} />
      ...
    </div>

仅当出于某种原因需要“伸出”并握住实际的DOM节点时，才应使用引用。另外，您通常希望状态尽可能地少，因为状态可能很复杂并且需要额外的“机械”才能完成工作。最好将状态保持在单个位置，然后通过其他组件将其向下传递。

从https://github.com/reactjs/react-basic看到此：


  我们倾向于选择我们的数据模型是不可变的。我们通过这些函数可以在顶部将状态更新为单个原子。

关于javascript - React的setProps()已弃用警告，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/36317753/