React的Fragment解决不必要的元素嵌套问题！
原创React的Fragment解决不必要的元素嵌套问题！
原创
Learn-anything.cn
发布于 2021-11-28 06:20:57
发布于 2021-11-28 06:20:57
文章被收录于专栏：learn-anything.cn
一、解决了什么问题？
在不额外创建 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 会发出一个关键警告
<React.Fragment key={item.id}>
<dt>{item.term}</dt>
<dd>{item.description}</dd>
</React.Fragment>
))}
</dl>
);
}三、参考链接：
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
