当我们存在以下情况的时候,往往会出项问题
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>
);
}
}
上面最终的渲染结果像下面这样
<table>
<tr>
<div>
<td>Hello</td>
<td>World</td>
</div>
</tr>
</table>
会导致td失效,这个时候就可以使用碎片,把Cloums改成下面这样就可以了
class Columns extends React.Component {
render() {
return (
<React.Fragment>
<td>Hello</td>
<td>World</td>
</React.Fragment>
);
}
}
这样渲染出来的就正常了,会忽略掉碎片层