Question

我注意到这种模式几次，并开始想知道实际上是什么方法来处理它。

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

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时我都会创建很多中间函数。这是一种不好的做法吗？有什么替代方案？

Answer 1

即使它仍然创建了中间函数，React way也是使用.bind()。

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

Answer 2

有什么替代方案？

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

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

处理动态生成元素中的点击次数

2 个答案: