変数にJSXを保持したまま表示する│株式会社シーポイントラボ

お題

JSXをrender以外でも扱ってみる

JSXは、タグで構成されたhtmlによく似たオブジェクトのかたまりのこと。色々解釈があるけど自分はこう思っています。普段はrender内で以下のように書くことができますが、実はrender関数の外でも扱うことができます。

render(){ <div> <p>りんご</p> </div> }

実際の書き方について

使い方は、変数を書いてその後ろにJSXタグを直接書くだけ。試しにプログレスバーを内包した関数コンポーネントを含んでみましょう。まずはプログレスバーを適当に作成。 const ProgressBarOrigin = props => ( <svg height=”50″ width=”50″><circle cx=”25″ cy=”25″ r=”14″ stroke=”#F6AD49″ stroke-width=”3″ fill=”translate” fill- opacity=”0″/></svg> ); export default ProgressBarOrigin; componentDidmountでもどこでもいいので以下のように変数に追加してみましょう。 const jsx = <ProgressBarOrizin /> このように、簡単に関数コンポーネント持つことができます。 componentDidmount→renderにそのまま流し込んでもよし、setStateをしてstateにJSXを持たせて自由につかうのもよし。プログレスバーの場合はcomponentDidmount時にこのプログレバーのコンポーネントを持たせておいて、コンテンツの読み込みが終わったらこれを含んだstateを空にすることでローディングアニメーションを作ることができます。

まとめ

JSXとrender関数が依存関係にあると、どうしてもコンポーネントが固定されてしまい state更新時に見せたくないコンテンツがある時に事前に修正を加えたりと面倒なことが多いです。小さなコンポーネントであればrender関数外で作っておくとメンテナンスの時に楽になるのでおすすめです。

変数にJSXを保持したまま表示する

お題

JSXをrender以外でも扱ってみる

実際の書き方について

まとめ

【JavaScript】MutationObserver で DOM を省エネ監視

ローカルストレージの「0」の扱いについて

株式会社シーポイントラボ