React - 如何给每个子组件一个唯一的引用？

Question

我有一个父组件，它呈现几个子组件之一：

class Parent extends React.Component {
  ...
  render() {
    const activeChild = this.state.activeChild; // 0, 1, 2, etc.
    return (
      <div>
        {this.props.children[activeChild]}
      </div>
    );
  }
}

这些子组件中的每一个都需要拥有ref自己唯一的 DOM 节点。就我而言，我需要将每个子节点的节点传递给第三方库以在其上绘制某些内容（例如：可视化、画布或地图）。

问题是，当子组件在 React 树中呈现到相同的“点”时，在不同的时间，它们最终都会共享相同的ref. （我认为）

这是一个使用 Leaflet.js 演示该问题的 JSFiddle。

当所有的孩子被单独渲染时，他们每个人都有自己的 DOM 节点来绘制他们的地图。但是当它们一次显示一个时，只有第一个能够绘制到ref'd DOM 节点上。

我可以告诉 React 为每个单独的孩子使用（并显示）单独的节点ref，即使孩子安装在同一点？

如果没有，有没有更好的方法来解决这个问题？

Answer 1

如果您的意思是 ref ref而不是key，请尝试以下操作：

class Parent extends React.Component {
  ...
   constructor(props) {
        super(props);
        this.myRef = React.createRef();
   }
  render() {
    const activeChild = this.state.activeChild; // 0, 1, 2, etc.
    const ChildComponent = this.props.children[activeChild];

    return (
      <div>
        <ChildComponent ref={this.myRef} />
      </div>
    );
  }
}

我没有测试这个。