jQueryをReactでラップ

Reactの公式チュートリアルの「他のライブラリとのインテグレーション」を読む。

可能だけど、ベストではない

Reactの内部表現に反してライブラリが直接DOMを書き換えなどを行った場合は、Reactは混乱してしまって回復できない。
ReactでjQuery（他のライブラリ）を使う場合、Reactによる更新がjQuery（他のライブラリ）によって追加されたDOMノードと競合しないように気を付ける必要がある。
Reactでラップすることで他のライブラリを使うことはできる。
Reactは他のライブラリによって追加されたDOMノードを触らないことが重要。

React は、React 以外のものが DOM に加えた変更を認識しません。React は自身の内部表現に基づいて更新内容を決定します。もし同じ DOM ノードが別のライブラリによって操作された場合、React は混乱してしまい、回復する方法がありません。

これが可能だからといって、これが React アプリケーションに最適なアプローチであるという意味ではありません。可能な限り React コンポーネントを使用することをお勧めします。React コンポーネントは React アプリケーションで簡単に再利用でき、また多くの場合、それらの動作や外観をより細かくコントロールできます。

jQueryのライブラリであるChosenを使用する例

class Chosen extends React.Component {
  
  componentDidMount() {
    this.$el = $(this.el);
    // ref 経由で渡された <select> ノードで Chosen を初期化
    this.$el.chosen();
    // jQueryのchangeイベント時に値を受け取る
    this.handleChange = this.handleChange.bind(this);
    this.$el.on('change', this.handleChange);
  }

  componentDidUpdate(prevProps) {
    // jQueryで追加したDOMに変更を知らせる(propsの変更に応じてDOMを手動で更新)
    if (prevProps.children !== this.props.children) {
      this.$el.trigger("chosen:updated");
    }
  }

  componentWillUnmount() {
    // jQueryのchangeイベント時に値を受け取る
    this.$el.off('change', this.handleChange);
    // ref 経由で渡された <select> ノードで Chosen を破棄
    this.$el.chosen('destroy');
  }
  
  // 値の変更を受け取るメソッド
  handleChange(e) {
    this.props.onChange(e.target.value);
  }

  render() {
    return (
      {/* ReactがjQueryで追加したDOMに触れないようdivでラップする */}
      <div>
        <select className="Chosen-select" ref={el => this.el = el}>
          {this.props.children}
        </select>
      </div>
    );
  }
}  );
}