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。（我认为）

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

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

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

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

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>
    );
  }
}

我没有测试这个。

React - 如何为每个子组件提供唯一的引用？

1 个答案: