网站地址正能量,社区门户网站建设,威海建设信息网站,小说主题 wordpressReact 基础巩固(二十七)——Fragment
Fragment
Fragment 允许将子列表分组#xff0c;而无需向 DOM 添加额外节点可以采用语法糖/来替代 Fragment#xff0c;但在需要添加 key 的场景下不能使用此短语
import React, { PureComponent, Fragment } from 而无需向 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// h2App标题/h2// pApp内容/p// /Fragment// 语法糖写法h2App标题/h2pApp内容/p{sections.map((item) {return (// 在需要key的场景下Fragment不能省略Fragment key{item.title}h2{item.title}/h2p{item.content}/p/Fragment);})}/);}
}export default App;查看Fragment应用后的效果
