[英]Adjacent JSX elements must be wrapped in an enclosing tag with line break tag
[英]Reactstrap: "Adjacent JSX elements must be wrapped in an enclosing tag"?
我正在尝试为我的 React 课程制作一个虚假的购物网站,但我不断收到以下消息:
解析错误:相邻的 JSX 元素必须包含在封闭标记中。 您想要一个 JSX 片段 <>...</> 吗? (53:6)
下面是理论上应该有效的代码。
import React from 'react';
import ReactDOM from 'react-dom';
import Producto from './Componentes/producto';
import './App.css';
import {Container} from 'reactstrap';
import {Row} from 'reactstrap';
import 'bootstrap/dist/css/bootstrap.min.css';
function App() {
return (
{/* Plantilla para producto disponible en producto.js */}
<Container>
<Row>
<Producto
titulo='Doom Eternal PS4'
imagen='https://www.weplay.cl/pub/media/catalog/product/cache/d406ac87fd7d160c9527a5559b847e93/p/s/ps4_doom-eternal.jpg'
descripcion='Los ejércitos del infierno han invadido la Tierra. Ponte en la piel del Slayer en una épica campaña para un jugador y cruza dimensiones para detener la destrucción definitiva de la humanidad.'
precio='666'
/>
<Producto
titulo='Nintendo Switch'
imagen='https://images-na.ssl-images-amazon.com/images/I/71ivrWiYkLL._AC_.jpg'
descripcion='Consola Nintendo Switch Black'
precio='229.000'
/>
<Producto
titulo='Consola SONY PS4'
imagen='https://estaticos.elperiodico.com/resources/jpg/9/8/playstation-sony-1370947347089.jpg'
descripcion='Consola PS4 SLIM 500GB '
precio='199.990'
/>
<Producto
titulo='Consola XBOX ONE'
imagen='https://compass-ssl.xbox.com/assets/dd/2e/dd2ef163-a130-403a-a394-a5b11c1533c8.jpg?n=Xbox-Family_Image-0_X1S-1111_496x279.jpg'
descripcion='Consola Xbox One solo juegos digitales '
precio='229.000'
/>
<Producto
titulo='Consola New Nintendo 2DS'
imagen='https://http2.mlstatic.com/nintendo-2ds-xl-black-and-turquoise-nuevo-D_NQ_NP_615117-MLM27995821063_082018-F.jpg'
descripcion='2DS XL Black Turqoise'
precio='129.990'
/>
<Producto
titulo='Big Chungus PS4'
imagen='https://static.wikia.nocookie.net/big-chungus/images/7/7a/AB851D95-0AA6-496D-83FC-6616222C8F01.jpeg'
descripcion='El videojuego más del mundo'
precio='999.999.999'
/>
</Row>
</Container>
);
}
export default App;
我已经尝试为代码添加几个不同的容器,例如<div>
和<fragment>
,但都不起作用。 我究竟做错了什么?
我克隆了你的项目并添加了一件重要的事情。 React片段, shorter syntax
非常好<></>
。
你的例子:
function App() {
return (
<>
<Container>
<Row>
<Producto />
<Producto />
</Row>
</Container>
</>
);
}
export default App;
来自您的回购的App.js。
import React from "react";
import Producto from "./Componentes/producto";
import "./App.css";
import { Container } from "reactstrap";
import { Row } from "reactstrap";
import "bootstrap/dist/css/bootstrap.min.css";
function App() {
return (
<>
<Container>
<Row>
<Producto
titulo="Doom Eternal PS4"
imagen="https://www.weplay.cl/pub/media/catalog/product/cache/d406ac87fd7d160c9527a5559b847e93/p/s/ps4_doom-eternal.jpg"
descripcion="Los ejércitos del infierno han invadido la Tierra. Ponte en la piel del Slayer en una épica campaña para un jugador y cruza dimensiones para detener la destrucción definitiva de la humanidad."
precio="666"
/>
<Producto
titulo="Nintendo Switch"
imagen="https://images-na.ssl-images-amazon.com/images/I/71ivrWiYkLL._AC_.jpg"
descripcion="Consola Nintendo Switch Black"
precio="229.000"
/>
<Producto
titulo="Consola SONY PS4"
imagen="https://estaticos.elperiodico.com/resources/jpg/9/8/playstation-sony-1370947347089.jpg"
descripcion="Consola PS4 SLIM 500GB "
precio="199.990"
/>
<Producto
titulo="Consola XBOX ONE"
imagen="https://compass-ssl.xbox.com/assets/dd/2e/dd2ef163-a130-403a-a394-a5b11c1533c8.jpg?n=Xbox-Family_Image-0_X1S-1111_496x279.jpg"
descripcion="Consola Xbox One solo juegos digitales "
precio="229.000"
/>
<Producto
titulo="Consola New Nintendo 2DS"
imagen="https://http2.mlstatic.com/nintendo-2ds-xl-black-and-turquoise-nuevo-D_NQ_NP_615117-MLM27995821063_082018-F.jpg"
descripcion="2DS XL Black Turqoise"
precio="129.990"
/>
<Producto
titulo="Big Chungus PS4"
imagen="https://static.wikia.nocookie.net/big-chungus/images/7/7a/AB851D95-0AA6-496D-83FC-6616222C8F01.jpeg"
descripcion="El videojuego más del mundo"
precio="999.999.999"
/>
</Row>
</Container>
</>
);
}
export default App;
Output 在 VScode terminal
浏览器( console
)中的 Output 。 出于显而易见的原因,我模糊了图像。
标签上方的注释被认为是它自己的 JSX 元素,因为它被花括号括起来了。 将它移到下面一行,它会正常工作!
<Container>
{/* Plantilla para producto disponible en producto.js */}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.