React 基础巩固(二十七)——Fragment
Fragment
- Fragment 允许将子列表分组，而无需向 DOM 添加额外节点
- 可以采用语法糖
<></>来替代 Fragment，但在需要添加 key 的场景下不能使用此短语
import React, { PureComponent, Fragment } from "react";
export class App extends PureComponent {
constructor() {
super();
this.state = {
sections: [
{ title: "outman1", content: "test content1" },
{ title: "outman2", content: "test content2" },
{ title: "outman3", content: "test content3" },
],
};
}
render() {
const { sections } = this.state;
return (
// <Fragment>
// <h2>App标题</h2>
// <p>App内容</p>
// </Fragment>
// 语法糖写法
<>
<h2>App标题</h2>
<p>App内容</p>
{sections.map((item) => {
return (
// 在需要key的场景下，Fragment不能省略
<Fragment key={item.title}>
<h2>{item.title}</h2>
<p>{item.content}</p>
</Fragment>
);
})}
</>
);
}
}
export default App;
- 查看Fragment应用后的效果
文章来源地址https://www.toymoban.com/news/detail-574529.html
文章来源：https://www.toymoban.com/news/detail-574529.html
到了这里，关于【前端知识】React 基础巩固(二十七)——Fragment的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
