一、解決了什么問題镰吆？
在不額外創(chuàng)建 DOM 元素的情況下帘撰，讓 render() 方法中返回多個元素，減少不必要的元素嵌套万皿。
二摧找、用法說明
1、問題
下面的 Table 不能正常渲染牢硅，原因是 Colums 中夾雜了 <div> 元素蹬耘。
class Table extends React.Component {
render() {
return (
<table>
<tr>
<Columns />
</tr>
</table>
);
}
}
class Columns extends React.Component {
render() {
return (
<div>
<td>Hello</td>
<td>World</td>
</div>
);
}
}
2、fragment解決方案
用 React.Fragment 修改上面的 Columns 組件减余，即可正確渲染 table 综苔。
class Columns extends React.Component {
render() {
return (
<React.Fragment>
<td>Hello</td>
<td>World</td>
</React.Fragment>
);
}
}
3、短語法
React.Fragment 還有另外一種寫法 <></> 位岔。
class Columns extends React.Component {
render() {
return (
<>
<td>Hello</td>
<td>World</td>
</>
);
}
}
4如筛、key屬性
目前 key 是唯一能傳遞給 React.Fragment 的屬性。
function Glossary(props) {
return (
<dl>
{props.items.map(item => (
// 沒有`key`抒抬，React 會發(fā)出一個關(guān)鍵警告
<React.Fragment key={item.id}>
<dt>{item.term}</dt>
<dd>{item.description}</dd>
</React.Fragment>
))}
</dl>
);
}
