概述
- 可以将子列表分组，而无需向DOM添加额外节点
- 简单理解：空标签
- <React.Fragment></React.Fragment> 或 <></>
render() {
return (
<React.Fragment>
<ChildA />
<ChildB />
<ChildC />
</React.Fragment>
)
}
动机
- 以下面的代码为例，如果Columns组件返回多个td元素才能实现效果，但是如果我们在Columns组件中使用了div父元素，则会使td元素失效。Fragment则可以解决这个问题。
//table.js
const Table = () => {
render() {
return (
<table>
<tr>
<Columns />
</tr>
</table>
)
}
}
//columns.js
const Columns = () => {
render() {
return (
<div>
<td>Hello</td>
<td>World</td>
</div>
)
}
}
//以上代码输出：
<table>
<tr>
<div>
<td>Hello</td>
<td>World</td>
</div>
</tr>
</table>
//此时 td 是失效的，可以使用Fragemengt解决这个问题
//用法：
//columns.js
const Columns = () => {
render() {
return (
<React.Fragment>
<td>Hello</td>
<td>World</td>
</React.Fragment>
)
}
}
//通过上面的方法我们就可以正确的输出table啦：
<table>
<tr>
<td>Hello</td>
<td>World</td>
</tr>
</table>短语法
- 可以使用一种新的，且更简短的类似空标签的语法来声明 Fragments
- <> </>
- 不支持 key 或属性
const Cloumns = () => {
render() {
return (
<>
<td>Hello</td>
<td>World</td>
</>
)
}
}
带key 的Fragments
- 使用显式 <React.Fragment> 语法声明的片段可能具有 key
- key 是唯一可以传递给 Fragment 的属性
function Glossary(props) {
return (
<dl>
{props.items.map(item => (
// 没有`key`，React 会发出一个关键警告
<React.Fragment key={item.id}>
<dt>{item.term}</dt>
<dd>{item.description}</dd>
</React.Fragment>
))}
</dl>
)
}
