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

问：

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

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

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

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

下面是一个使用 Leaflet.js 演示问题的 JSFidle。

当所有子节点单独呈现时，它们各自获得自己的 DOM 节点来绘制它们的映射。但是当它们一次显示一个时，只有第一个能够绘制到 'd DOM 节点上。ref

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

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

javascript 反应 JS dom

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

我没有测试这个。

上一个：Angular - TransferState - 页面加载两次（闪烁）

下一个：为什么使用 jQuery 的具有特定父节点（或后代）的 .find（）-ing 子节点会导致 DOM 更改？

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

React - How do I give each child component a unique ref?

评论