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

Question

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

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

下面是代码：

import React from 'react';
import './App.css';
import "bootstrap/dist/css/bootstrap.min.css";
import { Card } from "react-bootstrap";
import { Button } from "react-bootstrap";

function App() {
  return (
    <Card>
      <Card.Img variant="top"
        src="holder.js/100px160" />
      <Card.Body>
        <Card.Title>Card title</Card.Title>
        <Card.Text>
          This is a wider card with supporting text below as a natural lead - in to
        additional content.This content is a little bit longer.
        </Card.Text>
      </Card.Body>
    </Card>
    <Card>
      <Card.Img variant="top" src="holder.js/100px160" />
      <Card.Body>
        <Card.Title>Card title</Card.Title>
        <Card.Text>
          This card has supporting text below as a natural lead - in to additional
        content. {' '}
        </Card.Text>
      </Card.Body>
    </Card>
    <Card>
      <Card.Img variant="top"
        src="holder.js/100px160" />
      <Card.Body>
        <Card.Title>Card title</Card.Title>
        <Card.Text>123</Card.Text>
      </Card.Body>
    </Card>
  );
}

export default App;

Answer 1

从错误消息中：

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

这意味着组件不能返回多个JSX元素，只能返回单个JSX元素（可能有多个子元素和子元素）。

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

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

随着信息继续说明：

你想要一个JSX片段

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

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

或

return (
    <React.Fragment>
        <Card>...</Card>
        <Card>...</Card>
        <Card>...</Card>
    </React.Fragment>
)

Answer 2

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

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

…这是无效的语法。您需要包装这些

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

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