Reactガイドを読んでいくその42
これは
Reactのガイドを読んでいく記事です。
ガイドのリンク
フラグメント
コンポーネントが複数要素を返すといったケースがReactでは多いらしい。
fragmentを使うとDOMに余分なノードを追加することなく子要素をまとめることができるようになる。
同期
コンポーネントが子要素のリストを返すみたいな例はたくさんある。
// 例 class Columns extends React.Component { render() { return ( <div> <td>Hello</td> <td>World</td> </div> ); } }
HTMLが正しい挙動をする場合Columns/
>は複数の
tdを返す必要がある。
Columns/`のrender()で親のdiv要素を使うとHTMLは不正なものになってしまう。
fragmentはこのような問題を解決するために用意された。
使い方
class Columns extends React.Component { render() { return ( // divだった箇所をReact.Fragmentに <React.Fragment> <td>Hello</td> <td>World</td> </React.Fragment> ); } }
出力結果の違い
fragmentを使わない場合
<table> <tr> <div> <td>Hello</td> <td>World</td> </div> </tr> </table>
fragmentを使う場合
<table> <tr> <td>Hello</td> <td>World</td> </tr> </table>
短い記法
フラグメントを宣言するための新しい短縮記法
class Columns extends React.Component { render() { return ( <> <td>Hello</td> <td>World</td> </> ); } }
空タグにみえて誤解を生みそうだし、keyや属性サポートもないのであまり使わないのがよさそう。
key 付きフラグメント
明示的に <React.Fragment> と宣言したフラグメントでは key を持つことができる。
コレクションをフラグメントの配列に変換したい場合などに便利。
key はフラグメントに渡すことができる唯一の属性です。将来的には、イベントハンドラのような他の属性を渡すこともサポートするかもしれません。
みたいだけどどうなんだろう。
今日はここまで。