如何从event.target获取react元素

Question

I have attached an event listener to the parent element to listen for a non-synthetic-event and I wonder if there is a nice way to get reference to the component which triggers the event to use it's properties

I need to postpone the rendering of item.component until the nonSyntheticEvent occurs

const items = [
  {
    name: "click me",
    component: function First() {
      return <strong>asd</strong>;
    }
  },
  {
    name: "click me 2",
    component: function Second() {
      return <b>oasd</b>;
    }
  }
];

class Component extends React.Component {
  componentDidMount() {
    this.el.addEventListener("nonSyntheticEvent", event =>
      this.nonSyntheticEventHandler(event)
    );
  }

  nonSyntheticEventHandler(event) {

    // how to get reference to item
    // from event.target to render it's item.component

    const el = React.createElement(item.component);
    ReactDOM.render(el, event.target);
  }

  render() {
    return (
      <div ref={ref => { this.el = ref; }}>
        {this.props.items.map(item => <Child {...item} />)}
      </div>
    );
  }
}

<Component items={items} />

Answer 1

With React 16.3 React.createRef() is introduced which can be used in Component to create reference before the Child component is rendered.

for example in Component.constructor a reference to each child can be created in the state

this.state = {
  items: items.map(item => ({
    ...item,
    reference: React.createRef()
  }))
};

and then in the Child component can be used from props:

function Child(props){
  return (
    <div ref={props.reference}>
      <span>{props.name}</span>
    </div>
  );
}

and then in the nonSyntheticEventHandler the item can be obtained like so:

const found = this.state.items.find(item => {
  return item.reference.current === event.target;
});

working example in Codesandbox.io