Question

我知道我可以像下面那样传递参数

   someList.map((column) => {
    return (
      <th value={column} onClick={() => this.handleSort(column)}>{column}</th>
    )
   })

但是也建议不要使用箭头功能或绑定，因为这会导致不必要的render

（编辑：我认为这意味着当父组件呈现时，具有绑定功能作为道具的组件会被重新渲染，因为每次父组件渲染时都会创建函数）

但是如果没有使用bind或arrow function创建新功能，我就没有看到任何其他方法。

也许您可以为列表中的所有项创建绑定函数，但是当您从props获取数据时我不认为它是可行的（因此您无法在构造函数中预先创建绑定函数？

编辑：

https://github.com/facebook/react-native/issues/7892讨论了如何点击组件我想现在没有推荐的公开方式，至少对于本地反应来说。

Answer 1

由于您的th元素有值，您可以执行以下操作：

<th value={column} onClick={this.handleSort}>{column}</th>

您的handleSort功能可能如下所示：

handleSort(event) { const columnVal = event.target.value; .... }

Answer 2

我看到没有人在eslint上找到this解决方案。

将重复的部分拉入自己的组件：这将加快速度渲染，因为它避免了创建新函数的需要（通过绑定每次渲染都会调用。

检查this sandbox是否有实时演示。

<强>被修改：

在SO上还有一个答案here，它解释了为什么这样做会更好。

Answer 3

您可以使用以下语法创建箭头功能：

handleSort = column => () => {
   //do something
}

render () {
   return (
      someList.map((column) => {
         return (
           <th value={column} onClick={this.handleSort(column)}>{column}</th>
         )
      })
   )
}

React，如何在点击项目列表时传递参数？

3 个答案: