Javascript React.js解析错误：相邻的JSX元素必须包装在封闭标记中。你想要一个JSX片段吗？

我正在尝试构建一个带有引导功能的react应用程序，该应用程序将显示类似于C.C.C.的卡片，显示为3行，共3行，但我遇到以下错误：

分析错误：相邻的JSX元素必须包装在封闭标记中。你想要一个JSX片段吗

代码如下：

从“React”导入React； 导入“/App.css”； 导入bootstrap/dist/css/bootstrap.min.css； 从react引导导入{Card}； 从react引导导入{Button}； 功能应用程序{ 回来 卡片标题 这是一张更宽的卡片，下面的支持文本是一个自然的引导 附加内容。此内容稍微长一点。 卡片标题 这张卡片下面有支持文字，作为附加信息的自然引入 内容。{'} 卡片标题 123 ; } 导出默认应用程序；

---

正如错误所说，您有一个语法错误。函数JavaScript中的每个函数只能返回一个值。如果扩展JSX语法的功能，则函数当前正在执行以下操作：

return (
  React.createElement(Card, ...)
  React.createElement(Card, ...)
  React.createElement(Card, ...)
)

…这是无效的语法。您需要将这些元素包装到容器元素中，或者按照错误建议的方式使用React片段：

return (
  <>
    <Card .../>
    <Card .../>
    <Card .../>
  </>
);

---

片段的好处是它是一个单一的值，而不会增加额外DOM元素的成本。

正如错误所说，您有一个语法错误。函数JavaScript中的每个函数只能返回一个值。如果扩展JSX语法的功能，则函数当前正在执行以下操作：

return (
  React.createElement(Card, ...)
  React.createElement(Card, ...)
  React.createElement(Card, ...)
)

…这是无效的语法。您需要将这些元素包装到容器元素中，或者按照错误建议的方式使用React片段：

return (
  <>
    <Card .../>
    <Card .../>
    <Card .../>
  </>
);

---

片段的好处是，它是一个单一的值，而不会增加额外DOM元素的成本。

错误消息：

相邻的JSX元素必须包装在一个封闭的标记中

这意味着一个组件不能返回多个JSX元素，只能返回一个可能有多个子元素和子元素的JSX元素

目前，您拥有以下基本结构：

回来 ... ... ... 随着信息继续说明：

您想要JSX片段吗…

因此，您可以通过以下方法解决此问题：

回来 ... ... ... 或

回来 ... ... ...

---

从错误消息中：

相邻的JSX元素必须包装在一个封闭的标记中

这意味着一个组件不能返回多个JSX元素，只能返回一个可能有多个子元素和子元素的JSX元素

目前，您拥有以下基本结构：

回来 ... ... ... 随着信息继续说明：

您想要JSX片段吗…

因此，您可以通过以下方法解决此问题：

回来 ... ... ... 或

回来 ... ... ...

---

这回答了你的问题吗？这回答了你的问题吗？