javascript - 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 节点。就我而言，我需要将每个 child 的节点传递给第三方库以在其上绘制一些东西(例如:可视化、 Canvas 或 map )。

问题是，当子组件被渲染到 React 树中的同一个“点”时，在不同的时间，它们最终都共享相同的 ref。 . (我认为)

Here's a JSFiddle demonstrating the problem, using Leaflet.js.

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

我可以告诉 React 为每个 child 的 ref 使用(并显示)单独的节点吗？ ，即使 children 被安装在同一点？

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

Answer 1

如果您的意思是引用 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>
    );
  }
}

我没有测试这个。