我的 React 组件中有一个元素列表,我希望它们是可点击的。单击时我调用一些外部函数在参数中传递项目 ID:
render () {
return (
<ul>
{this.props.items.map(item => (
<li key={item.id} onClick={() => {doSomething(item.id)}></li>
))}
</ul>
)
}
此代码有效,但它有一个很大的性能缺陷:每次调用 render
时都会创建许多新的匿名函数。
如何在此处传递 doSomething
函数作为引用,同时仍然能够为其提供 item.id
?
最佳答案
您可以使用data-attributes,在使用相同功能的同时为每个项目设置正确的 id:
function doSomethingFromEvent(event){
return doSomething(event.target.dataset.id);
}
render () {
return (
<ul>
{this.props.items.map(item => (
<li key={item.id} data-id={item.id} onClick={doSomethingFromEvent}></li>
))}
</ul>
)
}
设置data-*
时元素中的属性,您可以使用 dataset
取回它,以哈希的形式。例如,在 doSomethingFromEvent
我有event.target.dataset = {id: *id*}
. See more on MDN
这在使用 <li key={item.id} data-myattriute={myvalue} onClick={this.handleClick}></li>
更新散列(例如状态)时更加清晰,我可以简单地定义 handleClick
比如:
handleClick(event){
// Here event.target.dataset = {myattribute: myvalue}
Object.assign(myObject, event.target.dataset);
// or
this.setState(event.target.dataset);
}
回到你的问题,这种方法的好处是,如果你确保你的容器元素(ul)不能在它的带有数据属性(li)的子元素之外被点击,你可以声明这个函数在上面:
render () {
return (
<ul onClick={doSomethingFromEvent}>
{this.props.items.map(item => (
<li key={item.id} data-id={item.id}></li>
))}
</ul>
)
}
现在你的函数是一次性创建的,甚至没有在每个项目中重复。
关于javascript - react : how to pass arguments to the callback,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41807604/