react内置组件之＜fragment＞＜/fragment＞

秃头的小毛驴2023-12-16 2:10

1、作用：

当你需要单个元素时，你可以使用 <Fragment> 将其他元素组合起来，使用 <Fragment> 组合后的元素不会对 DOM 产生影响，就像元素没有被组合一样。在大多数情况下，<Fragment></Fragment> 可以简写为空的 JSX 元素 <></>。

在使用 Fragment 之前，如果需要在组件中返回多个元素，通常需要将它们包装在一个父元素中，例如 div 或 span。但是这样做可能会导致一些问题，比如添加了额外的 DOM 节点，可能会影响组件的布局和样式，或者因为包装的元素不合法而引起警告。

2、示例：

javascript 复制代码

import React, { Fragment } from 'react';

const MyComponent = () => {
  return (
    <Fragment>
      <h1>Title</h1>
      <p>Paragraph 1</p>
      <p>Paragraph 2</p>
    </Fragment>
  );
};

export default MyComponent;

3、总结：

简而言之，你可以理解为和<></>一样，作为元素的包裹，但是他的区别就是：<Fragment></Fragment> 可以加key，<></>不可以加key。