什么是 Fragment?

React 里,我们的组件都需要一个父元素,但是有时候我们并不希望返回这个父元素,因为这会造成向 DOM 树中添加了多余的结构,同时也改变了我们设想的结构。

这时候,我们就可以使用 Fragment 来将我们的内容包起来,当然了,使用 <>也是一样的,这样就不会带来多余的 DOM 结构。

// 不使用 Fragment
return (
  <div>
    <span>1</span>
    <span>2</span>
    <span>3</span>
  </div>
);

// 使用 Fragment
return (
  <React.Fragment>
    <span>1</span>
    <span>2</span>
    <span>3</span>
  </React.Fragment>
);

// 使用 <>
return (
  <>
    <span>1</span>
    <span>2</span>
    <span>3</span>
  </>
);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
Last Updated: 8/20/2019, 3:36:58 AM