Fragments

XinYang's Blog2022年7月5日大约 1 分钟

如果一个组件返回多个元素，Fragments允许你将子列表分组，而无需向DOM添加额外节点。

如果是以下这种写法，会渲染多余的元素——div：

:::detaiils 查看示例代码

import React from "react";

class Title extends React.Component {
  render() {
    return (
      <div>
        <h2>Fragments</h2>
        <h2>Fragments</h2>
        <h2>Fragments</h2>
        <h2>Fragments</h2>
      </div>
    );
  }
}

export default class App extends React.Component {
  render() {
    return <Title></Title>;
  }
}

:::

可以使用短语法，它看起来像空标签，且实际它并不会渲染为新的标签元素： :::detaiils 查看示例代码

import React from "react";

class Title extends React.Component {
  render() {
    return (
      <div>
        <h2>Fragments</h2>
        <h2>Fragments</h2>
        <h2>Fragments</h2>
        <h2>Fragments</h2>
      </div>
    );
  }
}

export default class App extends React.Component {
  render() {
    return <Title></Title>;
  }
}

:::

也可以使用Fragments，它实际也不会渲染为新的标签元素：

:::detaiils 查看示例代码 import React from "react";

class Title extends React.Component { render() { return ( <React.Fragment>

export default class App extends React.Component { render() { return ; } }

Fragments

</React.Fragment> ); } }