时间戳

首页 > 解决方案 > 在 onClick 处理程序中传递参数的最有效方法

javascript - 在 onClick 处理程序中传递参数的最有效方法

问题描述

我正在使用内联箭头函数来更改onClick我的 React 组件中某些 div 的处理程序，但我知道这在性能方面不是一个好方法。

onClick客观地说，设置需要参数的处理程序的最有效方法是什么？这是我尝试过的：

1.内联箭头功能

changeRoute (routeName) {
  console.log(routeName)
}
render() {
  return (
    <>
      <div onClick={() => this.changeRoute("page1")}>1</div>
      <div onClick={() => this.changeRoute("page2")}>2</div>
    </>
  )
}

2. 如果我使用构造函数绑定，那么我该如何传递道具？

constructor() {
  super(props)
  this.changeRoute = this.changeRoute.bind(this)
}
changeRoute (routeName) {
  console.log(routeName)
}
render() {
  return (
    <>
      <div onClick={this.changeRoute}>1</div>
      <div onClick={this.changeRoute}>2</div>
    </>
  )
}

3. 如果我删除箭头函数，那么在渲染本身上调用的函数

changeRoute (routeName) {
  console.log(routeName)
}
render() {
  return (
    <>
      <div onClick={this.changeRoute("page1")}>1</div>
      <div onClick={this.changeRoute("page2")}>2</div>
    </>
  )
}

4. 如果我使用内联绑定，那么它的性能也不是最好的

changeRoute (routeName) {
  console.log(routeName)
}
render() {
  return (
    <>
      <div onClick={this.changeRoute.bind(this, "page1")}>1</div>
      <div onClick={this.changeRoute.bind(this, "page2")}>2</div>
    </>
  )
}

那么我怎样才能以最好的方式传递参数呢？

标签： javascriptreactjs

解决方案

您可以使用箭头函数来定义您的changeRoute处理程序。

这被称为Class field syntax. 更多关于它的官方反应文档。

constructor() {
  super(props)
}

changeRoute = (parameter) => (event) => {
    // business logic for route change.
}

然后你可以像这样直接使用这个函数：

render() {
  return (
    <>
      <div onClick={changeRoute(params1)}>1</div>
      <div onClick={changeRoute(params2)}>2</div>
    </>
  )
}

您不必担心绑定。箭头函数继承其父函数的this.

推荐阅读