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

これは

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

ガイドのリンク

ja.reactjs.org

JSX における props

JSX における子要素

開始タグと終了タグの両方を含むJSX式に置いて、タグに囲まれた部分はprops.childrenというプロパティとして渡される。
こういった子要素を渡す方法がいくつかあるので見ていく。

文字列リテラル

例えばこんな例がある。
<MyComponent>Hello NewYork</MyComponent> MyComponentにおけるprops.childrenは単なる文字列になる。
HTMLエスケープは元の文字列に復元されるのでHTMLを書くようにJSXを書くことができる。
例えば <div>This is valid HTML &amp; JSX at the Same.</div> JSXは行の先頭と末尾の空白文字を削除し、空白行も削除する。
タグに隣接する開業も削除され、文字列リテラル内での開業は1つの空白文字に置き換えられる。
以下のコードは全て同じものを表示する

<div>Hello World</div>

<div>
  This is valid HTML
</div>

<div>
  This is valid
  HTML
</div>

<div>

  This is valid HTML
</div>

できるからといってあんまり改行したりするのは場所を選びそう。

今日はここまで。