JSX のタグ名にはどんなものが使えるかまとめ

公式ドキュメントには、「頭に小文字を使うと HTML かと思うので、大文字で定義してください」というようなことがこの辺に書かれていますが、少し分からないケースがでてきたので自分でもトランスパイルしてみて調べました。

変数

この辺はドキュメントの通り頭小文字で定義した場合は単に文字列として渡されていました。

const orange = () => <div style={{padding:10,background:'orange'}} />;
const Orange = () => <div style={{padding:10,background:'orange'}} />;

展開後。

React.createElement('orange', {
  style: {padding: 10, background: 'orange'}
});
React.createElement(Orange, {
  style: {padding: 10, background: 'orange'}
});

オブジェクト

プロパティアクセス

ここが良く分からなかった部分です。
オブジェクトの場合は、大文字小文字関係なく React コンポーネントとして渡されます。

const div = {}
div.orange = () => <div style={{padding:10,background:'orange'}} />;
div.Orange = () => <div style={{padding:10,background:'orange'}} />;

展開後。

React.createElement(div.oarnge, {
  style: {padding: 10, background: 'orange'}
});
React.createElement(div.Orange, {
  style: {padding: 10, background: 'orange'}
});

ちなみにこの場合にdivを使っても React はそれを単に HTML タグと考えらるので問題ないです。

// 上の続き
<div />

// は
React.createElement('div', null);

インデックス記法でのアクセス

これもまぁドキュメントに書かれているのですが、div['orange']というような形を JSX のタグで使うことはできません。その場合は事前にOrangeのような変数にその値を格納してから<Orange />のように使う必要があります。