Help us understand the problem. What is going on with this article?

Reactでタグネストを動的に変えたいときの小技

Reactでコンポーネントを作る際に、状況によってタグの有無や重なり方が変わることがありますが、うまくすればJSXの中へ条件分岐を入れずに処理できます。

TL; DR

  • JSXのタグに指定するのは大文字の変数
  • 大文字の変数に小文字のタグ名を入れることもできる
  • タグを消したければReact.Fragmentも使える

JSXをJavaScriptに変換すると

JSXでは<div>のようなHTMLにも存在するタグや、<Component>のようなReactのコンポーネントをタグにできますが、JavaScriptに変換する場合のルールはシンプルです(React公式)。

  • <の次が小文字で始まる場合、React.createElementの第一引数は'div'のような文字列となる
  • <の次が大文字の場合、React.createElementの第一引数はその名前の変数になる

変数なので、変更もできる

ふつう、<Component>のように指定するものはimportなどで手に入れたコンポーネントですが、これに限られません。

たとえば、propstate1にコンポーネントを入れて、動作に応じて切り替えることも可能です。また、その場で生成した変数をJSXに指定しても構わないので、「他のpropstateを見て、その場でセットするコンポーネントを切り替える」ことも可能です。

コンポーネント間以外にも使える

React.createElementの引数に小文字のタグ名を指定できれば、それは変数経由でも構いません。タグ名の文字列を大文字の名前の変数に入れることで、変数の内容に応じてタグが切り替わるようになります。

const Tag = someCondition ? 'p' : 'span';
return <Tag>{ someContent }</Tag>;

さらに、「状況によってはあるタグを消したい」という場合に、そのタグの変数にReact.Fragmentを代入してしまえば、構築した仮想DOMから当該のタグは消滅します。画面幅によってテーブルを組み替えるなど、状況によってタグの存在から違う場合に便利かもしれません。


  1. コンポーネントはクラスにしろ関数にしろtypeoffunctionとなりますので、そのままstateにセットしようとすると、更新関数とみなされて失敗するパターンがあることは要注意です。 

Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away