Javascript 在动态生成的元素中处理单击

我注意到了这种模式好几次，开始思考什么才是正确的处理方式

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

render() {
  links = this.props.links.map(link => {
    <a
      onClick={this.clickHandle}>
      {link.title}
    </a>
  })
  // ...
}

---

虽然它能像预期的那样工作，但我想知道它是否真的是正确的方法。每次React重建这段dom时，我似乎都在创建许多中间函数。这是个坏习惯吗？什么是替代方案？

即使它仍然创建了中间函数，但最重要的是使用.bind

什么是替代方案

创建一个链接组件，将数据作为道具获取并将其传递给单击处理程序：

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

---

是的，这是执行OP描述的操作的一种更简单的方法，但它也有相同的缺点，即每次运行render时都会创建一个新函数。这是因为.bind返回一个新函数。这是个问题吗？可能99%的情况下都不会。我要补充的唯一一点是，你可能希望在标签上有一个{…this.props}排列

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