React高級ガイド:フラジャメンント
10336 ワード
前の節:Refs転送次の節:高次コンポーネント
React高級ガイド:フラジャメンント引用 モチベーション の使い方 短語法 key付きFragments オンラインDemo ことばを引く
Reactの一般的なパターンは、コンポーネントが複数の要素を返すことである.Fragmentは、DOMに追加のノードを追加する必要なく、あなたのサブ要素のグループにすることができます.
動機
一般的なパターンは、コンポーネントが列のサブ要素を返すことである.以下のReactセグメントを見てみましょう.
React高級ガイド:フラジャメンント
Reactの一般的なパターンは、コンポーネントが複数の要素を返すことである.Fragmentは、DOMに追加のノードを追加する必要なく、あなたのサブ要素のグループにすることができます.
render() {
return (
);
}
動機
一般的なパターンは、コンポーネントが列のサブ要素を返すことである.以下のReactセグメントを見てみましょう.
class Table extends React.Component {
render() {
return (
);
}
}
。 ， HTML 。
class Columns extends React.Component {
render() {
return (
Hello
World
);
}
}
：
142.
ハロー
ワールド
らかにこれは なHTMLであり、Fragmentはこの の を している.
い class Columns extends React.Component {
render() {
return (
Hello
World
);
}
}
のコードは に しいコードを します.
ハロー
ワールド
たんご
ここではFragmentを するためのフレーズがあります. のラベルのように えます.class Columns extends React.Component {
render() {
return (
<>
Hello
World
>
);
}
}
の を うように、keyや をサポートしていない にも えます.
key きフラジャメンントfunction Glossary(props) {
return (
{props.items.map(item => (
// key，React key warning
- {item.term}
- {item.description}
))}
);
}
keyは、Fragmentに えることができる の である. は、イベントプロセッサのような の をサポートすることができます.
オンライン
CodePenでこの しいフラジャメンテーション を してもいいです.
の :Refs の : コンポーネント