反应:<React.Fragment>vs 数组 [英] React: <React.Fragment> vs array

问题描述

我在阅读 React 文档时对 Fragments 的主题感到困惑.既然我们基本上可以在 React 中返回一个数组，那么在什么情况下需要 ?

这是一个代码示例:

const ReturnArray = () =>{常量项 = [<div key={1}>项目 1</div>,<div key={2}>项目 2</div>,<div key={3}>项目 3</div>,]退换货品}const ReturnFragments = () =>{常量项 =<React.Fragment><div key={1}>项目 1</div><div key={2}>项目 2</div><div key={3}>项目 3</div></React.Fragment>退换货品}

我认为它们是一样的.

大多数现有主题都在讨论关键警告问题"，例如 github 上的 this，但是我只想知道

的用例<小时>

如果有什么不明确的地方请告诉我.

具体来说:

请解释和的区别.它们都返回多个没有无用的

标签的元素.为什么要使用额外的 <React.Fragment/> 部分?

解决方案

官方文档说

<块引用>

使用数组符号与普通的有一些令人困惑的区别JSX:

1. 数组中的子项必须用逗号分隔.

2. 数组中的子项必须有一个键，以防止 React 的键警告.

3. 字符串必须用引号括起来.

为了简单起见，React 提供了可以代替数组使用的 Fragment 组件.

考虑我们如何使用数组包装多个孩子

render() {返回 [一些文字.",<h2 key="heading-1">一个标题</h2>,"更多文字.",<h2 key="heading-2">另一个标题</h2>,还有更多的文字."];}

以及如何使用 Fragment 来实现.

render() {返回 (<片段>一些文字.<h2>标题</h2>更多文字.<h2>另一个标题</h2>甚至更多的文字.</片段>);}

直接取自官方文档.

片段也可以写成如下.

render() {返回 (<>一些文字.<h2>标题</h2>更多文字.<h2>另一个标题</h2>甚至更多的文字.</>);}

I was reading the React doc and get confused by the topic Fragments. Since we can basically return an array in React, in what situation would one need <Fragements />?

Here is a code sample:

const ReturnArray = () => {
  const items = [
    <div key={1}>Item 1</div>,
    <div key={2}>Item 2</div>,
    <div key={3}>Item 3</div>,
  ]
  return items
}

const ReturnFragments = () => {
  const items = 
    <React.Fragment>
      <div key={1}>Item 1</div>
      <div key={2}>Item 2</div>
      <div key={3}>Item 3</div>
    </React.Fragment>

  return items
}

I think they are the same.

Most existing topics talk about "key warning issues" like this on github, but I just want to know the use cases of <Fragments />

---

Edit:

Please tell me if there is anything ambiguous.

To be specific:

Please explain the difference between <ReturnArray /> and <ReturnFragments />. They both return multiple elements without useless <div> tag. Why bother using the extra <React.Fragment /> part?

解决方案

Official document says

Using array notation has has some confusing differences from normal JSX:

1. Children in an array must be separated by commas.

2. Children in an array must have a key to prevent React’s key warning.

3. Strings must be wrapped in quotes.

So to make it simple, React provides Fragment component that can be used in place of arrays.

Consider how we can wrap multiple children using array

render() {
 return [
  "Some text.",
  <h2 key="heading-1">A heading</h2>,
  "More text.",
  <h2 key="heading-2">Another heading</h2>,
  "Even more text."
 ];
}

And how it can be achieved using Fragments.

render() {
  return (
    <Fragment>
      Some text.
      <h2>A heading</h2>
      More text.
      <h2>Another heading</h2>
      Even more text.
    </Fragment>
  );
}

Taken directly from official document.

Fragments can be written as below aswell.

render() {
      return (
        <>
          Some text.
          <h2>A heading</h2>
          More text.
          <h2>Another heading</h2>
          Even more text.
        </>
      );
    }

这篇关于反应:&lt;React.Fragment&gt;vs 数组的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！