javascript - 处理动态生成的元素中的点击

Question

我多次注意到这种模式，并开始想知道处理它的正确方法是什么。

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

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

但是，使用这种方法，当用户单击链接时，将调用 clickHandle 方法，而无需任何有关 link 对象的相关信息。因此，为了访问相应的对象，我在 clickHandle 中使用了闭包属性，并以这种方式重写它:

onClick={this.clickHandle(link)}
// ...
clickHandle(link) {
  return () => {
    alert(link)
  }
}

虽然它按预期工作，但我想知道这是否真的是正确的方法。看起来每次 React 重建这 block dom 时我都会创建很多中间函数。这是一个不好的做法吗？有哪些替代方案？

Answer 1

What are alternatives?

创建一个链接组件，获取数据作为 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} />
);