在子组件中使用箭头函数反应传递参数

Question

我有这些父级和子级组件，我想通过点击功能在子级组件中选择一个项目。但是，似乎子组件中的函数会自动调用，而不是等到用户单击元素后才开始调用。为了更清楚一点，这里是我的父级和子级组件

export class ParentView extends Component {
  state = {
    selectedItem: {}
  }

  handleClick = (item) => {
    alert('you click me');
    this.setState({selectedItem: item});
  }

  render() {
    let item = { name: 'Item-1' };
    return (
      <div>
        <ChildItem item={item} handleClick={this.handleClick} />
      </div>
    );
  }
}

export class ChildItem extends Component {
  render() {
    const {item, handleClick} = this.props;
    return (
      <div>
        <a  onClick={handleClick(item)} />
      </div>
    );
  }
}

这些是我使用箭头函数传递handleClick给子组件的组件，但是警报始终在第一次渲染时被调用，而不会被用户触发。有什么建议吗？

Answer 1

您应该将函数本身传递给onClick，而不是传递的函数调用的结果。

如果要使用param调用它，则可以选择：

• 用其绑定item与handleClick.bind(this, item)。bind创建一个新函数将具有预定义的第一个参数-item
• 通过新的箭头html" target="_blank">功能，如 () => handleClick(item)

下面的例子：

export class ChildItem extends Component {
  render() {
    const { item, handleClick } = this.props;

    return (
      <div>
        <a onClick={() => handleClick(item)} />
      </div>
    )
  }
}

在您的代码中，您要调用onClick声明中的函数，因此handleClick执行结果将传递给onClick，这很可能不是您想要实现的。

<a onClick={handleClick(item)} />

更新：

正如@dhilt所写，这种方法有一个缺点。由于新创建的箭头函数以及.bind每次调用render方法时也会创建新函数ChildItem，因此与以前的“缓存”
render方法结果相比，react会将生成的react元素威胁为不同的元素，这意味着可能导致将来会出现性能问题，甚至对于eslint都有关于此问题的规则，但是由于两点，您不应该仅遵循此规则。

1）performance problems应加以测量。我们不禁止使用Array.prototype.forEach常规，for因为for相同或“更快”。

2）将单击处理程序定义为类属性会导致增加组件实例的初始化步骤。重新渲染反应快速有效，因此有时初始渲染更为重要。

只需使用对您更有利的产品，并可能阅读类似https://cdb.reacttraining.com/react-inline-functions-and-
performance-bdff784f5578的
文章