避免在渲染中绑定，同时维护父组件的上下文答案

【问题标题】：Avoiding binding in Render while maintaining context from Parent Component避免在渲染中绑定，同时维护父组件的上下文
【发布时间】：2017-06-05 20:33:48
【问题描述】：

我目前有（TableHeader 组件）表头使用onClick 处理程序呈现，当触发时，它会捕获表头的值并在父组件中设置状态（父是 Table 组件，子是 TableHeader）。

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

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

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

在父组件的构造函数中，绑定了该函数：

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

然后通过：

<TableHeader onClick={this.sortColumns} />

【问题讨论】：

什么是“col”？我试图弄清楚是否有某些原因需要使用 render() 绑定到“col”，但我对此知之甚少。你能显示分配它的代码吗？
@Jose，我们在这里需要更多信息。您能发布更多代码的 sn-ps 吗？
@ErikHermansen 抱歉，col 来自正在映射的数组。贴的时候被剪掉了会更新。
我认为您不需要在渲染中绑定 onClick()。您是否能够更改 sortColumns 函数，使其将“col”作为参数？如果是这样，那么只有正确调用它的问题，我可以很容易地展示如何去做。
@ErikHermansen 我才意识到发生了什么。所以sortColumns 采用 col 参数，但是当修改为采用另一个参数（并记录）时，col 值显示为第二个参数。虽然我认为保持这种方式很容易，但我想将其限制在一个论点 - 如果这有意义的话。

标签： javascript reactjs

【解决方案1】：

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

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

【讨论】：