公式ドキュメントには、「頭に小文字を使うと HTML かと思うので、大文字で定義してください」というようなことがこの辺に書かれていますが、少し分からないケースがでてきたので自分でもトランスパイルしてみて調べました。
変数
この辺はドキュメントの通り頭小文字で定義した場合は単に文字列として渡されていました。
const orange = () => ;
const Orange = () => ;展開後。
React.createElement('orange', {
style: {padding: 10, background: 'orange'}
});
React.createElement(Orange, {
style: {padding: 10, background: 'orange'}
});オブジェクト
プロパティアクセス
ここが良く分からなかった部分です。
オブジェクトの場合は、大文字小文字関係なく React コンポーネントとして渡されます。
const div = {}
div.orange = () => ;
div.Orange = () => ;展開後。
React.createElement(div.oarnge, {
style: {padding: 10, background: 'orange'}
});
React.createElement(div.Orange, {
style: {padding: 10, background: 'orange'}
});ちなみにこの場合にdivを使っても React はそれを単に HTML タグと考えらるので問題ないです。
// 上の続き
// は
React.createElement('div', null);インデックス記法でのアクセス
これもまぁドキュメントに書かれているのですが、div['orange']というような形を JSX のタグで使うことはできません。その場合は事前にOrangeのような変数にその値を格納してから<Orange />のように使う必要があります。
