1.Fregments
React 中的一个常见模式是一个组件返回多个元素。Fragments 允许你将子列表分组，而无需向 DOM 添加额外节点。
|
1 2 3 4 5 6 7 8 9 |
render() { return ( <React.Fragment> <ChildA /> <ChildB /> <ChildC /> </React.Fragment> ) } |
2.用法
|
1 2 3 4 5 6 7 8 9 10 |
class Columns extends React.Component { render() { return ( <React.Fragment> <td>Hello</td> <td>World</td> </React.Fragment> ); } } |
这样可以正确的输出
<Table>：|
1 2 3 4 5 6 |
<table> <tr> <td>Hello</td> <td>World</td> </tr> </table> |
3.短语法
你可以使用一种新的，且更简短的语法来声明 Fragments。它看起来像空标签：
|
1 2 3 4 5 6 7 8 9 10 |
class Columns extends React.Component { render() { return ( <> <td>Hello</td> <td>World</td> </> ) } } |
4.带 key 的 Fragments
使用显式 <React.Fragment> 语法声明的片段可能具有 key。key 是唯一可以传递给 Fragment 的属性。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
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> ) } |
