Question

问题是：

如何在具有prop ref的节点中获取ref（作为ReactElement而不是DOM）

以下示例

将MyTable类渲染为：

 <table ref="myTable">
     {this.state.list.map(name=>
         <AddVarTableRow key={name} myName={name}/>
     )}
 </table>

在componentDidUpdate中，想要这样做：

React.Children.forEach(this.refs.tbody.props.children, (item,idx)=>{
   item.setState(...)
});

但得到警告：

警告：ReactDOMComponent：不访问DOM节点的.props;相反，重新创建最初render的道具或直接从此节点读取DOM属性/属性（例如，this.refs.box.className）。

所以我改为：

React.Children.forEach(this.refs.tbody.children, (item,idx)=>{
   item.setState(...)
});

得到了：

未捕获的不变违规：对象作为React子对象无效（找到：[object HTMLCollection]）。如果您要渲染子集合，请使用数组，或者使用React附加组件中的createFragment（object）包装对象。

那么....无论如何要做到这一点？

Answer 1

在React中，你实际上并没有设置者，至少不是以传统的面向对象的方式。 React组件可以设置自己的状态，但不能设置任何其他状态。

组件更新其子组件的方式是重新呈现它们。从父组件接收孩子的props，因此如果props需要更改，则父组件只需使用一组新的道具重新呈现它们。

您的渲染功能可能如下所示：

render: function () {
  return (
    <table>
      <tbody>
        {this.state.data.map(function (user) {
          return (
            <Row
              firstName={user.firstName}
              lastName={user.lastName}
              age={user.age}
            />
          );
        })}
      </tbody>
    </table>
  );
}

Row组件如下所示：

var Row = React.createClass({
  render: function () {
    return (
      <tr>
        <td>{this.props.firstName}</td>
        <td>{this.props.lastName}</td>
        <td>{this.props.age}</td>
      </tr>
    );
  }
});

请注意，每次状态更改时都会调用render()。因此，如果您需要使用一组新数据更新表，只需在父组件中调用this.setState()，即

this.setState({
  data: newData
});

瞧，表格重新呈现最新数据。

如何在React中获取DOM节点中的孩子的参考？

1 个答案: