ReactでimportしたComponentを操作する

外部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文法を理解できれば）理解しやすい。

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