阅读代码的时候发现这个,从来没有用过遂查了查
在代码过程中肯定有这个需求
class Table extends React.Component {
render() {
return (
<table>
<tr>
<Columns />
</tr>
</table>
);
}
}
我的组件,在他的render函数肯定是要返回一个或多个td标签的,返回一个没问题,返回多个呢,在render里只能有一个标签包裹着其他标签,这时
class Columns extends React.Component {
render() {
return (
<React.Fragment>
<td>Hello</td>
<td>World</td>
</React.Fragment>
);
}
}
class Columns extends React.Component {
render() {
return (
<>
<td>Hello</td>
<td>World</td>
</>
);
}
}
不过需要注意的是,用空tag的写法不允许有key和属性,而且还有很多工具不支持,所以尽可能的用
function Glossary(props) {
return (
<dl>
{props.items.map(item => (
// Without the `key`, React will fire a key warning
<React.Fragment key={item.id}>
<dt>{item.term}</dt>
<dd>{item.description}</dd>
</React.Fragment>
))}
</dl>
);
}