我在父元素上附加了一个事件侦听器,以侦听非合成事件,我想知道是否有一种很好的方法来获取对触发该事件以使用其属性的组件的引用
我需要将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} />
答案 0 :(得分:1)
在React 16.3中引入了React.createRef()
,可以在Component
组件中使用Child
来创建引用。
例如在Component.constructor
中,可以在状态下创建对每个孩子的引用
this.state = {
items: items.map(item => ({
...item,
reference: React.createRef()
}))
};
,然后可以在props中使用Child组件:
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中的工作示例