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