Reactでオブジェクトを丸ごとPropsとしてComponentとして渡したい時に、スプレッド構文を良く使います。
<HogeComponent {...hogeProps}/> //hoge propsのkeyとvalueをkey={value}の形でpropsとして展開する
これ、よく使いはしていたのですが今まで気持ち悪いなぁと思って使っていました。
普通にpropsを書くならXMLに属性を与えるのと同じですが、key=valueの形ではなくスプレッド演算子を書くという見た目に正直気持ち悪さを感じていました。
JSXはテンプレートではない
ただ、この気持ち悪さは「JSXはHTMLテンプレートの類だ」という思い込みによるものでした。
(Reactより先にVueを触っていたのでそのバイアスがかかっていたようです)
実際は、JSXはJSX is an XML-like syntax extension to ECMAScript 1 つまりあくまでもXMLっぽく書けるjavascriptです。
いつもJSXで書いているタグはXMLではなく、React.createElementの糖衣構文に過ぎません。
React.createElementとJSX
JSXで書いたタグは以下のような形でReact.createElementに変換されます。
<Hoge fuga='fuga' piyo='piyo'>
<div>exmaple</div>
</Hoge>
React.createElement('Hoge',
{
fuga: 'fuga',
piyo: 'piyo'
},
React.createElement('div',null,'example')
);
第1引数:タグ名(HTMLタグ,Reactコンポーネント名,React.Fragmentの何れか)
第2引数:各propsをまとめてObject化したもの
第3引数:タグの子要素(こちらもタグだった場合React.createElementに展開)
これがスプレッド構文利用パターンだと
<Hoge {...hogeProps}>
<div>exmaple</div>
</Hoge>
React.createElement('Hoge',
{...hogeProps},
React.createElement('div',null,'example')
);
となるわけです。
引数として{...hogeProps}という形で値を渡すのは別に普通ということですね。
まとめ
- jsx中のタグはReact.createElementの糖衣構文
- 変換先をイメージすれば別に気持ち悪く無い
- それでもなお気持ち悪いというのなら、全てReact.createElementで書けばいい(暴論)