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应用后的效果