Question

我有这些父子组件，我想通过点击功能选择子组件中的项目。然而，似乎子组件中的函数被自动调用而不是等到用户单击元素。为了使它更清楚，我的父母和子组件

handleClick

这些是使用箭头函数将int main(int argc,char **argv) { struct termios cur,bak; int fd,count; char *tx_buf; tx_buf = (char*) malloc(20); fd = open("/dev/ttyAMA0",O_RDWR | O_NOCTTY | O_NDELAY); tcgetattr(fd,&cur); /* store current attribute */ bak = cur; /* backup structure */ cur.c_cflag = B9600 | CS8 | CLOCAL | CREAD; cur.c_iflag = IGNPAR; cur.c_oflag = 0; cur.c_lflag = 0; tcflush(fd,TCIFLUSH); tcsetattr(fd,TCSANOW,&cur); /* TX */ strncpy(tx_buf,"hello",5); count = write(fd,tx_buf,5); printf("wrotten:%5d\n",count); tcsetattr(fd,TCSANOW,&bak); close(fd); return 0; }传递给子组件的组件，但是在第一次渲染时始终会调用警报，而不会被用户触发。有什么建议吗？

Answer 1

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

如果您想使用param调用它，您可以选择：

将item与handleClick.bind(this, item)绑定。 bind创建一个新函数将具有预定义的第一个参数 - item
传递像() => 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方法的结果，这意味着将来可能会导致一些性能问题，eslint甚至有关于此问题的规则，但您不应该遵循此规则因为有两点。

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

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

只需使用对您更好的内容，并且可能会阅读此类文章https://cdb.reacttraining.com/react-inline-functions-and-performance-bdff784f5578

Answer 2

接受的答案对性能有影响：ChildItem组件将被重新渲染，即使由于每个渲染器分配了一个新功能而没有更改数据（由于.bind也是这样；与箭头相同）功能）。在这种特殊情况下，很容易通过在新的公共类字段上从props获取处理程序及其参数来避免此类问题：

export class ChildItem extends Component {

  onClick = () => {
    this.props.handleClick(this.props.item);
  }

  render() {
    return (
      <div>
        <a  onClick={this.onClick} />
      </div>
    );
  }
}

ParentView保持不变。

Answer 3

ES6 方式：

使用arrow functions =＆gt;

onClick={() => handleClick(item)}

（@ havenchyk＆＃39的答案是 ES5 方式。）

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

3 个答案: