親コンポーネントからのコンテキストを維持しながらレンダリングを避ける

Question

私は現在、（TableHeaderコンポーネント）テーブルヘッダーをonClickハンドラでレンダリングしていますが、これは発生時にヘッダーの値を取得し、親コンポーネントの状態を取得します子はTableHeaderです）。

親コンポーネントのコンテキストへのアクセスを維持しながら、TableHeaderのrenderメソッド内でonClick関数をバインドしないようにしたいと考えています。現在私が持っているもの：

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

各関数に渡される関数は、単に列の値をとり、それに応じてソートするだけです。 、その関数がバインドされた親コンポーネントのコンストラクタで

：

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> 
    ) 
}