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

Question

I have a parent component that renders one of several child components:

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

Each of these child components needs to have a ref to its own unique DOM node. In my case, I need to pass each child's node to a third-party library to draw something on it (for example: a visualization, a canvas, or a map).

The problem is that, when the child components are rendered to the same 'point' in the React tree, at different times, they all end up sharing the same ref . (I think)

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

When all of the children are rendered separately, they each get their own DOM node to draw their map onto. But when they are shown one-at-a-time, only the first one is able to draw onto the ref 'd DOM node.

Can I tell React to use (and display) separate nodes for each individual child's ref , even if the children are being mounted at the same point?

If not, is there a better approach to this problem?

Answer 1

If you mean ref the ref and not the key , try something like this:

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

I did not test this.