javascript - 避免渲染中的绑定(bind)，同时维护父组件的上下文

Question

我目前使用 onClick 处理程序呈现(TableHeader 组件)表标题，该处理程序在触发时捕获标题的值并在父组件中设置状态(父组件是一个表组件，子组件是表头)。

我想避免在 TableHeader 的 render 方法中绑定(bind) onClick 函数，同时仍然保持对父组件上下文的访问。目前我拥有的:

render() {
  return (
  ...
    <tr>
      {columns.map(col => <th key={col} onClick={this.props.onClick.bind(null, col)} {...hoverHandlers}>{col}</th>)}
    </tr>
  )
}

传递给每个 th 的函数只是获取列的值并相应地进行排序。

在父组件的构造函数中，该函数被绑定(bind):

this.sortColumns = this.sortColumns.bind(this);

然后通过:

<TableHeader onClick={this.sortColumns} />

Answer 1

更改 sortColumns() 以将 col 变量作为参数。然后更新 render() 以传递变量。

render() {
  return (
   ...
   <tr>
     {columns.map(col => <th key={col} 
        onClick={function() { this.props.onClick(col) } } 
        {...hoverHandlers}>{col}</th>)}
   </tr>
   )
}