React的Fragment标签有什么作用

德顺

发布于 2023-08-25 13:22:50

1760

发布于 2023-08-25 13:22:50

文章被收录于专栏：前端资源

React 中经常会遇到一个组件中 return 多个子组件的情况，举个简单的例子：

class Table extends React.Component {
  render() {
    return (
      <table>
        <tr>
          <Columns />
        </tr>
      </table>
    );
  }
}

该情况下子组件 <Columns /> 需要返回 <td> 元素，父组件的表格才能正常显示。

如果在 <Columns /> 的 render() 中的最外层使用了 div ，就会出问题。

class Columns extends React.Component {
  render() {
    return (
      <div>
        <td>Hello</td>
        <td>World</td>
      </div>
    );
  }
}

最终得到的 <Table /> 输出为：

<table>
  <tr>
    <div>
      <td>Hello</td>
      <td>World</td>
    </div>
  </tr>
</table>

这时候 <Fragment /> 标签就派上用场了。

Fragments 的作用

Fragments 可以作为一个标签使用，但不会向 DOM 添加额外节点。

用法：

class Columns extends React.Component {
  render() {
    return (
      <React.Fragment>
        <td>Hello</td>
        <td>World</td>
      </React.Fragment>
    );
  }
}

这样可以正确的输出 <Table />：

<table>
  <tr>
    <td>Hello</td>
    <td>World</td>
  </tr>
</table>

带 key 的 Fragments：

使用显式 <React.Fragment> 语法声明的片段支持使用 key 值。

一个使用场景是将一个集合映射到一个 Fragments 数组：

function Glossary(props) {
  return (
    <dl>
      {props.items.map(item => (
        // 没有`key`，React 会发出一个关键警告
        <React.Fragment key={item.id}>
          <dt>{item.term}</dt>
          <dd>{item.description}</dd>
        </React.Fragment>
      ))}
    </dl>
  );
}

目前 key 是唯一可以传递给 Fragment 的属性。未来 React 可能会添加对其他属性的支持，例如事件。

简单(新)语法：

也可以用空标签来代替，这是一种新的，且更简短的语法来声明 Fragments：

class Columns extends React.Component {
  render() {
    return (
      <>
        <td>Hello</td>
        <td>World</td>
      </>
    );
  }
}

注意：空标签 <> </>，不支持 key 或属性。

未经允许不得转载：w3h5-Web前端开发资源网 » React的Fragment标签有什么作用

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2021-12-22)，如有侵权请联系 cloudcommunity@tencent.com 删除

react

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

登录后参与评论

0 条评论

热度