変数に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関数外で作っておくとメンテナンスの時に 楽になるのでおすすめです。