我几次注意到这种模式,并开始思考处理它的正确方法是什么。

假设我有一个对象数组,需要为其生成相应的可单击元素。在点击处理程序中,我想访问相应的对象。

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} />
);

07-24 09:39
查看更多