如何在 React 的 DOM 节点的子节点中获取 ref？答案

【问题标题】：How to get ref in DOM node's children in React?如何在 React 的 DOM 节点的子节点中获取 ref？
【发布时间】：2016-03-11 02:22:49
【问题描述】：

问题是：

如何在带有 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) 包装对象。

所以....无论如何要这样做？

【问题讨论】：

你永远不会从另一个组件设置组件的状态。一个组件负责自己的状态，没有其他人负责。您确实需要告诉我们您要解决的问题。这让我觉得这是一个经典的 XY 问题。 meta.stackexchange.com/questions/66377/what-is-the-xy-problem
谢谢大卫。实际上，我有一个具有动态子代 () 的。渲染后，我想通过 AJAX 加载数据并更新
的孩子。所以问题是 React.Children.forEach 既不适用于 this.refs.myTable.children 也不适用于 ..myTable.props.children(warning)。

标签： reactjs

【解决方案1】：

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

组件更新其子组件的方式是重新渲染它们。子组件的 props 是从父组件接收的，因此如果 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
});

瞧，表格使用最新数据重新渲染。

【讨论】：