Posted at

ReactでimportしたComponentを操作する

More than 1 year has passed since last update.


外部Componentsをカスタマイズしたい・・・

 Reactをいじっていて、Componentsをimportすることは多々あるだろうが、そのComponentにカスタマイズしたい時がある。自分のアプリケーション内からのimportであれば、元のComponentを書き換えてあげれば問題ないが、外部からimportしているとそうはいかない。


解決法:直接DOMから操作する

 Reactの構成上、カスタマイズ(挙動を変える)するには、propsを使うしかない。当たり前だが、外部Componentsはあらかじめ指定されたpropsしか受け取らないので、Reactちっくにカスタマイズするのは無理そう。

 そうすると、残された道はReactでなくJavaScript(jQuery)を使って直接DOMを操作していくしかない。


componentDidUpdateで直接DOMを操作する

 Reactは仮想DOM云々言われるように、実際のDOMを操作するわけではない。では、直接DOMを操作できないのか?一応できる。(あまり綺麗ではないが…)

 Reactには、ライフサイクルというのがあって(詳しくは下記URL)、その中で、直接DOMを操作できるタイミングがある。そのうちの一つがcomponentDidUpdate。(componentDidMountでも出来る)

 https://qiita.com/yukika/items/1859743921a10d7e3e6b

 つまり、このcomponentDidUpdate内にJSやらjQueryでDOM操作をすればいい。


React.js

class sample extends React.Component {

...
componentDidMount(){
//ここにDOM操作処理
}
...
}


Reactのメリット

 Reactは、仮想DOMという「DOMの設計図」を作る。「DOMの設計図」と言われても良く分からない場合は、以下のように解釈したら良い。


  • javascript(jQuery)では、プログラマは「これをこうして」という指示を飛ばす

  • Reactでは、プログラマは「これをこうなるようにして」という指示を飛ばす(それをどう実現するかはReactが考える)

 こんな感じ。Reactでは「こうしたい」という完成図(=設計図)がコード上に見て取れるので、jQueryなどに比べて(React文法を理解できれば)理解しやすい。

 ただ、今回のように、「こうなる」の部分を変えられない場合には、「こうして」の指示を別途に飛ばさないといけない。