Bootstrap Reactstrap：“相邻的JSX元素必须 Package 在一个封闭的标记中”？

iezvtpos 于 2022-12-31 发布在 Bootstrap

关注(0)|答案(2)|浏览(149)

我试图使我的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;

Here's the GitHub repo, if anyone would like to run this locally.
我试着为代码添加了几个不同的容器，比如<div>和<fragment>，但是没有一个能用。我做错了什么？

twitter-bootstrap

来源：https://stackoverflow.com/questions/74942397/reactstrap-adjacent-jsx-elements-must-be-wrapped-in-an-enclosing-tag

2条答案

按热度按时间

cyvaqqii1#

我克隆了你的项目，并添加了一个至关重要的东西。Reactfragments，shorter syntax工作完美的罚款<></>。

示例您的情况：

function App() {
  return (
    <>
      {/* Plantilla para producto disponible en producto.js */}
      <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 (
    <>
      {/* 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;

以VScode格式输出terminal

在浏览器中输出（console）。* 由于明显的原因，我模糊了图像 *。

赞(0）回复(0）举报 2022-12-31

xsuvu9jc2#

标签上面的注解被认为是它自己的JSX元素，因为它被花括号括起来了。把它移到下面一行，它就可以正常工作了！

<Container>
{/* Plantilla para producto disponible en producto.js */}

赞(0）回复(0）举报 2022-12-31

我来回答

Bootstrap Reactstrap：“相邻的JSX元素必须 Package 在一个封闭的标记中”？

2条答案

相关问题

热门标签

最新问答