在使用react时,一种常见的情况是组件返回多个元素,通常我会在最外层加一个div返回。
这样在大部分情况其实也没有什么,只是会多了一个额外的div。
但是当我们遇到像td这样的元素时
class MyTable 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>
);
}
}
这时候其实最好的办法是使用React.Fragment,他允许组件返回多个元素,但是无需向DOM中添加额外节点。
class Columns extends React.Component {
render() {
return (
<React.Fragment>
<td>Hello</td>
<td>World</td>
</React.Fragment>
);
}
}
这样的话,输出则外:
<table>
<tr>
<td>Hello</td>
<td>World</td>
</tr>
</table>