Reactガイドを読んでいくその48
これは
Reactのガイドを読んでいく記事です。
ガイドのリンク
他のライブラリとのインテグレーション
DOM 操作プラグインとのインテグレーション
jQuery Chosen プラグインとのインテグレーション
jQuery Chosenって？ harvesthq.github.io
よく見かける選択させるところにいるやつっぽい。
このプラグインの最小のラッパーを書いてみましょうということらしい。
Chosen が DOM に対してどういった操作をしているのか？
・コールされるとDOMから読み取った属性をインラインCSSで隠しながら
独自の視覚表現をもつ別のDOMノードを追加する
・Chosen は渡された
Reactで使うときはどういったことをするか？
class Chosen extends React.Component {
render() {
return (
<div>
<select className="Chosen-select" ref={el => this.el = el}>
{this.props.children}
</select>
</div>
);
}
}
・余分な<div>で<select>をラップする
→これは上で書いたようにChosenがselectの直後に別のDOM要素を追加するため
Reactからは一つのDOMとして認識されるので、そういった誤解を避けるようにする。
・ライフサイクルメソッドを実装する
・値の変更について通知を受ける
・React側のpropsは時間とともに変更される可能性があるため、
Reactに管理を任せるのではなく手動で更新する
・・・ほかのインテグレーションとの連携はできないことはないけれどうまくいかない可能性のほうが高い印象を持ってきました。
今日はここまで。
