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

Question

我正在尝试使用引导程序构建一个反应应用程序，该应用程序将展示类似于 CCC 的卡片显示为连续 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

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

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

...这是无效的语法。您需要将这些<Card/>元素包装在容器元素中，或者使用 React 片段执行错误提示：

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

片段具有作为单个值的好处，同时不会增加无关 DOM 元素的成本。