这就是为什么你不能返回相邻的 JSX 元素。

我使用 React 已经有一段时间了，它是一款非常棒的工具，可以快速编写可维护的应用程序。但我记得刚开始学习的时候，老师指出了我的第一个错误

Syntax error: Adjacent JSX elements must be wrapped in an enclosing tag

他直接告诉你，你只能从一个组件返回一个元素，如果你有多个元素，只需将它们全部包装在父元素中，例如div或React.Fragment（我后来才知道）。

我当时就觉得 “好吧！！！我记得这件事。”

但对于任何刚开始使用 React 的人来说，你不必这样做。

附言：这张图片是一只高兴并表示赞同的独角兽（也就是竖起大拇指）。我想明确地表达这一点，因为图片可能有点像素化。双关语。

理解 React 的工作原理

让我们看看当您编写 JSX 并简化开发过程时幕后发生了什么。

JSX 只是 React 库 createElement 方法的语法糖，但它甜得让人无法抗拒（也不应该）。
这意味着，用 JSX 能做到的事情，用 React.createElement() 也能做到。

让我们从制作h1元素开始。

React.createElement("h1", { id: "myHeading" }, "Unicorn Party Here");

让我来解释一下createElement 函数<h1>👉 children here</h1>，它的第一个参数定义了我们要创建的元素的类型。第二个参数接受一个元素属性的对象，这里我们赋予它一个 id。第三个参数是它的子元素，也就是像普通 HTML 中那样放在开始和结束标签之间的任何内容。

这将在渲染时生成一个实际的h1，看起来像<h1 id="myHeading">Unicorn Party Here</h1>

如何将子元素添加到父元素

从上面看到的内容本能地思考，可以按如下方式添加子元素

React.createElement(
  "ul",
  null,
  React.createElement("li", null, "Item one"),
  React.createElement("li", null, "Item two"),
  React.createElement("li", null, "Item three")
);

这将呈现为

<ul>
  <li>Item one</li>
  <li>Item two</li>
  <li>Item three</li>
</ul>

我们可以看到，第二个参数之后的任意数量的参数都被视为子参数。这就是编写 JSX 时发生的情况，它使用 createElement 并渲染 DOM，如示例所示。

return 语句

现在让我们重新思考一下 JavaScript 函数可以返回什么。除了数字和字符串之外，函数可以返回数组、对象甚至其他函数类型的任何值，但让我们看看 return 语句的一些注意事项。

function square(a) {
  return
  a * a;
}

这将转换为

function square(a) {
  return;
  a * a;
}

由于 return 语句受自动分号插入的影响，因此不允许换行。更多信息请访问MDN。

因此我们使用括号()来防止返回添加自动分号。

function square(a) {
  return (
    a * a;
  )
}

这将返回正确的答案。

但是看看下一行你会说，我在喝什么独角兽牛奶🤷‍♀️🤷‍♂️？

function returnSelf(a, b) {
  return (
    a
    b
  )
}

这完全是错误的语法

因此，当你尝试返回两个相邻的 JSX 元素时

return (
  <h1>Hello World</h1>
  <p>Are Unicorns even real?</p>
);

这与

return (
  React.createElement("h1", null, "Hello World")
  React.createElement("p", null, "Are Unicorns even real?")
);

也是同样错误的语法。

但将其全部包裹在 div 中听起来像是一个完美的解决方案，而且它

return (
  <div>
    <h1>Hello World</h1>
    <p>Are Unicorns even real?</p>
  </div>
);

这与

return (
  React.createElement("div", {id: "container"}, 
    React.createElement("h1", null, "Hello World"),
    React.createElement("p", null, "Are Unicorns even real?")
  )
);

这是完全有效的语法，我的意思是，我们从开始编码时就返回单个值。实际上，任何有效的语法都可以，你也可以尝试像这样返回一个元素数组。

import React from 'react';
import ReactDOM from 'react-dom';

function ReturnJSXArray() {
  return [<h1>The End</h1>, <h3>🦄🦄🦄🦄</h3>];
}

ReactDOM.render(<ReturnJSXArray />, document.getElementById('root'));

React 实际上会渲染这些。

一旦你读完这篇文章，你会发现很明显相邻的 JSX 需要一个包装器，或者你甚至可以返回 JSX 数组（你应该避免这样做），但是我们太专注于学习 React，我们往往会忘记这一点。

鏂囩珷鏉ユ簮锛�https://dev.to/tusarkashyap63/this-is-why-you-can-t-return-adjacent-jsx-elements-3g00