在子组件中使用箭头函数来反应传递的参数 [英] React passing parameter with arrow function in child component

问题描述

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

I have these parent and child component, I want to pass click function to select an item in child component. Yet it seems the function in child component become automatically called instead of waiting until the user click the element. To make it clearer here is my parent and child components

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传递给子组件，但始终在第一次渲染时调用警报，而不会被用户触发.有什么建议吗?

Those are my components using arrow function to pass handleClick to child component, yet alert always being called at first render without being triggered by user. Any suggestion?

推荐答案

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

You should pass a function itself to onClick, not a result of the passed function invocation.

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

If you would like to invoke it with param, you have options:

• 将其与item和handleClick.bind(this, item)绑定. bind创建一个新函数将具有预定义的第一个参数-item
• 传递新的箭头功能，例如() => handleClick(item)

• bind it with item with handleClick.bind(this, item). bind creates a new function will have a predefined first parameter - item
• pass new arrow function like () => handleClick(item)

以下示例:

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

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

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

In your code you're invoking a function in onClick declaration, so the result of handleClick execution will be passed to onClick, what is most likely not something you wanted to achieve.

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

更新:

正如@dhilt所写，这种方法有一个缺点.由于每次调用ChildItem的render方法时，新创建的箭头函数和.bind也会创建新函数，因此与以前的render缓存"结果相比，react将威胁到所得的react元素不同. >方法，这意味着将来可能会导致一些性能问题，甚至

as @dhilt wrote, there is a drawback of such approach. Since the newly created arrow function and .bind also creates new function every time the render method of ChildItem is invoked, react will threat the resulted react element as a different, comparing to the previous "cached" result of render method, that means that likely it might lead to some performance problems in the future, there is even a rule regarding this problem for eslint, but you shouldn't just follow this rule because of two points.

1)performance problems应该被测量.我们不禁止使用Array.prototype.forEach来支持常规的for，因为for相同或更快".

1) performance problems should be measured. we don't forbid using Array.prototype.forEach in favor of a regular for because for is the same or "faster".

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

2) definition of click handlers as class properties leads to increasing of the initializing step of the component instance. Re-render is fast and efficient in react, so sometimes the initial rendering is more important.

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

Just use what's better for you and likely read articles like this https://cdb.reacttraining.com/react-inline-functions-and-performance-bdff784f5578

这篇关于在子组件中使用箭头函数来反应传递的参数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！