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看到此:


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