Reactガイドを読んでいくその60

React

これは

Reactのガイドを読んでいく記事です。

ガイドのリンク

ja.reactjs.org

JSX における props

JSX における子要素

子要素としての JSX 要素

JSX要素を子要素とする方法もある。
子要素にする理由としてはネストしたコンポーネントを表示したい場合などに活用できる。
また、異なる型の子要素を混在させることができるので、文字列リテラルをJSX要素と同時に子要素として渡すようなことも可能になる。

この機能、HTMLと似ていて、たとえばJSXとして記述したコードがそのままHTMLとして動作する。
下は参考に載っていたコードだが、一目で納得できる。

<div>
  Here is a list:
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
  </ul>
</div>

要素の配列を返すこともできる。

render() {
    return [
         <li key="A">item1</li>
         <li key="B">item2</li>
         <li key="C">item3</li>
    ];
}

知っていると便利そう。

今日はここまで。