ESlint で jsx-no-bind を守るには？

Question

不明点

ESlintのルールの一つとして，jsx-no-bind があります．これはjsx内でのbindを禁止するものですが，同時にjsx内でのarrow-functionの利用も禁止します．
私が愛用している，eslint-plugin である eslint-config-airbnbには，jsx-no-bind が 2 （エラー出力）で入っています．

jsx内でbind してはいけない，あるいはアローファンクションを定義しては行けない理由はわかります．
なぜならば，render() されるたびに関数が生成され，メモリリークの危険性があるからです．

そこで，インスタンスメソッドとして event に登録する関数を定義すれば良いのですが，一つ不明点がでてきました．

それは，イベントに引数を付与したい時です．具体的には次のようなコンポーネントです．

class Sample extends React.Component {
  constructor(props) {
     super(props);
     this.state = {
        data: [
           1,
           2,
           3,
           4,
        ], 
     };
     this.renderButtonList = this.renderBurronList.bind(this);
  }

  renderButtonList() {
     return this.state.data.map(item => {
        return (
           <button
              onClick={(e) => this.onClick(e, item)}
           />
        );
     });
  }

  render() {
     return (
        <div>
           {this.renderBurronList()}
        </div>
     );
  }
}

あまり望まない回答

• jsx-no-bind を 1 にする．（逃げてる感じがするので）
• ここだけコメント文でルールを無効化する

lint ルール は必ず守らなくちゃいけないとは思ってなく，必要に応じては上書きして無効化するのも視野に入れていますが，質問の回答としてはあまり望んでいません．

上のようなコードを arrow-function なしでかつ 直感的に書く方法が知りたいからです．

Answer 1

ES6の機能ですが、これはどうでしょうか？

class Sample extends React.Component {
  constructor(props) {
     super(props);
     this.state = {
        data: [
           1,
           2,
           3,
           4,
        ], 
     };
  }

  onClick = (item) => (e) => { 
     // 押下時の挙動
  }

  renderButtonList() {
     return this.state.data.map(item => {
        return (
           <button
              onClick={this.onClick(item)}
           />
        );
     });
  }

  render() {
     return (
        <div>
           {this.renderBurronList()}
        </div>
     );
  }
}

これで問題なく動いたので使ってますが、知見がある方のご意見も頂けたら嬉しく思います。

[追記]

この書き方は良くなかったかもしれません。ESLintには引っかからないですが、アロー関数を直接渡すのと同様、パフォーマンスには影響あるかもです。
考えてみれば、アロー関数を返す関数を渡しているだけなので・・・

新しいコンポーネントを作成してそれに流し込むのが良いのでしょうね

class MyButton extends Component {
  constructor(props) {
    super(props);
    this.onClick = this.onClick.bind(this);
  }

  onClick(event) {
    this.props.onClick(event);
  }

  render() {
    return <button item={this.props.item} onClick={this.onClick} />
  }
}

class Sample extends Component {
  // 略

  render() {
     return (
       <div>
         {this.state.data.map(item => 
           <MyButton item={item} onClick={this.onClick} />
         )}
       </div>
     );
  }

  // 略
}

Comments

[KazuyaGosho]

ドキュメントにありましたね。

> tl;dr, you can create another React component for the list items where you pass in the item and the click handler and pass the item as a param.

とのことです。

https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-no-bind.md
https://github.com/airbnb/javascript/issues/659
https://github.com/palantir/tslint-react/issues/96

Answer 2

例えば、要素自体にデータを持たせる方法があります。
HTML要素であれば、data-*属性に情報を保存することができます。

     return this.state.data.map(item => {
        return (
           <button
              data-item={item}
              onClick={this.onClick}
           />
        );
     });

Comments

[退会済みユーザー]

なるほど．これは知らなかったです．文字列や数値であればこの方法で解決できそうです．