16

我刚刚了解了 React Fragments。

我知道通过创建更少的树节点并在查看检查器时使其更清晰，片段会稍微更有效，但是为什么我们应该在 React 组件中用作容器呢？我们应该总是在我们的组件中使用 React.Fragments 吗？

使用片段是否会使样式更难？（我不确定，因为我自己还没有尝试过）。

4

3 回答 3

5

在最常见的实践中，React 只允许渲染单个 <> 元素。如果要渲染多个元素，可以用<div></div>或包围它们<span></span>。

Fragment 情况示例： Fragment 最重要的用法之一是在<tbody>标签中（如官网示例Fragment中所述），在您想<tr/>在一个元素中渲染多行的情况下，您可能会发现无法将它们包装起来around <div>，因为在标签内你只能有<tr/>元素！

好吧，在另一种情况下，我建议始终使用单元素渲染，除非你必须这样做。

于 2018-08-01T07:57:11.663 回答
1

您可以React.fragments在必须获得道具时使用，例如，<React.fragments key={1}><\React.fragments>. 如果不需要道具，可以使用<> <\>.

于 2022-01-02T09:09:01.347 回答
-3

使用<></>IMO只是不好的做法。

我建议仅<div></div>在需要将子元素放置在父元素内时使用。否则，它只是不需要的毫无意义/多余的 html。

例如，我们有一个与 Div 元素关联的类名。

<body>
  <div classname="people-group-1">
    <h1>Hello Shippers</h1>
    <h1>Hello Matey</h1>
    <h1>Hello Pal</h1>
  </div>
  <div classname="people-group-2">
    <h1>Hello Mucka</h1>
    <h1>Hello Geeza</h1>
    <h1>Hello Dude</h1>
  </div>
</body>

我不建议使用以下示例，因为除了可读性之外，Div 元素没有任何用途。

<body>
  <div>
    <h1>Hello Shippers</h1>
    <h1>Hello Matey</h1>
    <h1>Hello Pal</h1>
  </div>
  <div>
    <h1>Hello Mucka</h1>
    <h1>Hello Geeza</h1>
    <h1>Hello Dude</h1>
  </div>
</body>

<!-- No different to--->

<body>
 <h1>Hello Shippers</h1>
 <h1>Hello Matey</h1>
 <h1>Hello Pal</h1>
 <h1>Hello Mucka</h1>
 <h1>Hello Geeza</h1>
 <h1>Hello Dude</h1>
</body>

如果你需要返回多个不需要父元素的元素，你可以使用这种方法。

import React, { Fragment } from 'react'

const names = ['Shippers', 'Matey', 'Pal', 'Mucka', 'Geeza', 'Dude']

export const Headers = () => (
  <Fragment>{names.map(name => <h1>{`Hello ${name}`}</h1>)}</Fragment>
)

然后你可以将它导入到任何地方的渲染器中。

import React from 'react'
import { Headers } from './Headers'

export const Body = () (
  <body>
    <Headers />
  </body>
)

这将转换为

<body>
 <h1>Hello Shippers</h1>
 <h1>Hello Matey</h1>
 <h1>Hello Pal</h1>
 <h1>Hello Mucka</h1>
 <h1>Hello Geeza</h1>
 <h1>Hello Dude</h1>
</body>
于 2021-01-08T16:13:02.923 回答