我几次注意到这种模式,并开始思考处理它的正确方法是什么。
假设我有一个对象数组,需要为其生成相应的可单击元素。在点击处理程序中,我想访问相应的对象。
render() {
links = this.props.links.map(link => {
<a
onClick={this.clickHandle}>
{link.title}
</a>
})
// ...
}
但是,使用这种方法,当用户单击链接时,将在没有任何有关
clickHandle
对象的相关信息的情况下调用link
方法。因此,为了访问相应的对象,我在clickHandle
中使用了Closure属性,并将其重写为:onClick={this.clickHandle(link)}
// ...
clickHandle(link) {
return () => {
alert(link)
}
}
虽然可以正常工作,但我想知道这是否是正确的方法。每次React重建这块dom时,似乎都在创建许多中间函数。这是不好的做法吗?什么是替代品?
最佳答案
什么是替代品?
创建一个链接组件,该组件将数据作为道具获取,并将其传递给点击处理程序:
var Link = React.createClass({
propTypes: {
data: ...,
onClick: React.PropTypes.func.isRequired,
},
_onClick: function() {
this.props.onClick(this.props.data);
},
render: function() {
return (
<a
onClick={this._onClick}>
{this.pops.data.title}
</a>
);
}
});
用法:
links = this.props.links.map(
link => <Link key={...} data={link} onClick={this.clickHandle} />
);