javascript - React.js 解析错误:相邻的 JSX 元素必须包含在封闭标记中。你想要一个 JSX 片段 <>...?
问题描述
我正在尝试使用引导程序构建一个反应应用程序,该应用程序将展示类似于 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;
解决方案
正如错误所说,您有语法错误。您的函数(JavaScript 中的每个函数)只能返回一个值。如果您扩展 JSX 语法的功能,您的函数当前正在执行以下操作:
return (
React.createElement(Card, ...)
React.createElement(Card, ...)
React.createElement(Card, ...)
)
...这是无效的语法。您需要将这些<Card/>
元素包装在容器元素中,或者使用 React 片段执行错误提示的操作:
return (
<>
<Card .../>
<Card .../>
<Card .../>
</>
);
片段具有作为单个值的好处,同时不会增加无关 DOM 元素的成本。
推荐阅读
- ruby-on-rails - 依赖破坏不起作用会给出外键异常
- javascript - 向包含新消息的父级添加粗体类
- laravel - Kubernetes 上的 snipeit 未运行
- python - Matplotlib:多线图
- macos - hadoop start-xxx.sh 命令未找到且语法错误
- c# - 按钮单击后局部视图显示为布局 null
- godot - 我可以发送 HTTP 请求并从 AirConsole API 接收响应吗?
- php - 使用 php 计算 odbc 连接并获取数据
- jenkins - 如何在 jenkins 管道中并行运行两个分支代码?
- java - RestEasy 406 不可接受