Как получить элемент реакции из event.target
Я прикрепил прослушиватель событий к родительскому элементу для прослушивания несинтетического события, и мне интересно, есть ли хороший способ получить ссылку на компонент, который запускает событие, чтобы использовать его свойства.
Мне нужно отложить рендеринг item.component до появления nonSyntheticEvent
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} />
Это должно быть обработано с помощью ссылок, не обязательно, как было предложено выше, но каким-то образом. В чем конкретно ваш случай? Что это за событие и почему нужно заменить div собственным дочерним элементом? В зависимости от того, как должен выглядеть результат, могут быть гораздо менее сложные способы добиться того же.
Это событие Выбрать, родное для приложений Apple TV TVML, и документ не будет заменен его дочерним элементом, я пытался упростить вопрос
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
В React 16.3 представлен React.createRef(), который можно использовать в Component для создания ссылки перед рендерингом компонента Child.
например, в Component.constructor ссылка на каждого потомка может быть создана в состоянии
this.state = {
items: items.map(item => ({
...item,
reference: React.createRef()
}))
};
а затем в дочернем компоненте можно использовать props:
function Child(props){
return (
<div ref = {props.reference}>
<span>{props.name}</span>
</div>
);
}
а потом в nonSyntheticEventHandler элемент можно получить так:
const found = this.state.items.find(item => {
return item.reference.current === event.target;
});
рабочий пример в Codesandbox.io
Может быть, вы могли бы попробовать добавить обратную ссылку в функцию ref?
ref = {ref => { this.el = ref; ref.reactComponent = this }}. Хотя кажется очень хакерским.