如何修复错误:相邻的JSX元素必须包装在封闭标记中？在react原生中
在React原生中，如果出现错误提示"相邻的JSX元素必须包装在封闭标记中"，这通常是因为在JSX中，相邻的元素必须被一个父元素包裹起来。这是因为JSX在编译时会被转换为JavaScript代码，而JavaScript中不允许直接返回多个相邻的元素。
要修复这个错误，你可以将相邻的JSX元素包裹在一个父元素中。有几种常见的方法可以实现这个目的：
- 使用一个空的
<div>元素作为父元素：
<div>
<Element1 />
<Element2 />
</div>- 使用一个
<React.Fragment>元素作为父元素。<React.Fragment>是一个特殊的组件，它不会在DOM中渲染任何额外的元素：
<React.Fragment>
<Element1 />
<Element2 />
</React.Fragment>- 使用空标签
<>作为父元素。这是React 16及以上版本引入的一种简化写法：
<>
<Element1 />
<Element2 />
</>以上三种方法都可以解决"相邻的JSX元素必须包装在封闭标记中"的错误。根据实际情况选择其中一种方法即可。
推荐的腾讯云相关产品：腾讯云云服务器（CVM）和腾讯云云函数（SCF）。
腾讯云云服务器（CVM）是一种弹性计算服务，提供可扩展的云服务器实例，可满足不同规模和业务需求。了解更多信息，请访问：腾讯云云服务器（CVM）产品介绍
腾讯云云函数（SCF）是一种事件驱动的无服务器计算服务，可以帮助开发者更轻松地构建和管理应用程序。了解更多信息，请访问：腾讯云云函数（SCF）产品介绍
相关·内容
2回答
通过数组反应循环并呈现多个子组件的实例
javascript、reactjs
我试图对数组进行迭代，并将字段分配给相应的子组件。我目前的做法如下：
class CardExtension extends React.Component {
render() {
return (
<div>
{ this.props.value }
</div>
);
}
}
class Card extends React.Component {
render() {
return (
浏览 2提问于2020-03-15得票数 0
11回答
腾讯云上如何自建DNS？
云服务器、DNS 解析 DNSPod、linux、centos、dns
当前腾讯云私有域VPCDNS暂时还不支持背景下，怎么在腾讯云CVM环境下构建内网解析？
实现功能：
1.支持腾讯云云环境保留域名解析如：mirrors.tencentyun.com;
2.支持用户自有业务域名内部网解析如：you.aaa.com；
3.支持访问外网域名解析如：www.qq.com；
4.支持分域名转发到不同的DNS服务器；
基础环境：
CVM：标准型SA2（请根据自身业务情况，选择样本）
操作系统：CentOS Linux版本7.6.1810（核心）
绑定：bind-9.11.4-16.P
浏览 1401提问于2021-01-27
3回答
为什么querySelector不能与v-for一起使用？
javascript、vue.js、vuejs3
我有一个简单的带有v-for循环的div，可以在页面上显示项目。这些项目上有一个class，我想用Javascript的querySelector方法选择它。 <div class="product-feed">
<div v-for="Product in ProductFeed" :key="Product.ProductID" class="product-item" >
<Product-Vue-Component :Product=
浏览 53提问于2021-09-30得票数 1
4回答
相邻的JSX元素必须封装在一个封闭的标记- gatsby.js中。
javascript、html、reactjs、gatsby
我对代码的质量表示歉意。当我试图将html代码放入gatsby.js项目到index.js页面时，我会得到以下错误：
./src/components/section3.js模块构建失败(来自./node_modules/gatsby/dist/utils/babel-loader.js)：SyntaxError: /path/src/components/section3.js:相邻的JSX元素)中的错误必须包装在一个封闭标记中。你想要一个JSX片段<>.？(26:8)
import React, { Component } from "react"
import
浏览 1提问于2019-06-24得票数 0
回答已采纳
2回答
在react中将数据添加到子项时更新父项中的数据
javascript、reactjs
我是个新手。我看到很多帖子都是在更新父级的时候更新子级的，但我没有发现相反的情况。
我有一个父组件(MainComponent)来获取和存储数据。要添加数据的表单(FormNewSubItem )在一个子组件中。
当我提交表单时，我在一个项中添加了一个子项，并希望main component中的项数组存储新数据。
在MainComponent.jsx中
storeItems(items) {
// store items in db
}
retrieveItems() {
// return items from db
}
render {
return (
<M
浏览 12提问于2020-03-03得票数 1
1回答
JSX片段是否真的只是说，将它们作为最后的兄弟添加到父级中？
reactjs、jsx
如果我们在React /JSX中返回：
return (
<div> ... </div>
<div> ... </div>
);
它将会出错，声明它必须是单个元素，所以我们可以使用React.fragment
return (
<>
<div> ... </div>
<div> ... </div>
</>
);
但我注意到，这些元素只是作为孩子添加到直接父元素中，或者如果父元素已经有一些孩子，那么这些元素将作为现有孩子的“稍后”兄弟添加。
浏览 1提问于2021-02-04得票数 0
1回答
getJSON函数与其他简单函数冲突
jquery、onclick、getjson
我正在使用getJSON构建一个产品列表页面-运行良好-但在同一文档中，我也有一些简单的点击功能，拒绝工作。我想是不是有冲突？请帮帮我！
<script>
$(document).ready(function(){
$.getJSON("data.json", function(data){
var product_data = '';
$.each(data, function(key, value){
// Build product tile
product_data += '<h3>&#
浏览 12提问于2019-11-26得票数 0
4回答
如何选择使用ajax动态加载的元素？
jquery、ajax
由于页面的某些部分对所有页面都是相同的，所以我希望能够动态加载它们，这样我就可以编辑它们一次。例如，我需要加载一个侧栏和一个导航条。
加载后，我需要将一些元素存储在这些外部页面中的变量中，以便以后可以调用它们，例如，动画化它们、操纵它们等等。
我认为我只需要选择类或id，但这似乎还不够。
<!-- navbar.html -->
<div id="navbar-content">
<div id="element1"></div>
<div id="element2">&
浏览 4提问于2015-05-03得票数 0
回答已采纳
2回答
在React中显示一个组件的多个属性
reactjs、components
我是个初学者，使用本教程作为指南学习React >
我很难理解和弄清楚如何制作一个购物清单，以产品名称，sku和价格为属性。我知道如何从教程中传递一个属性，但是一个组件的多个属性我不知道我做错了什么。
我的问题只是产品名称显示在页面上。我也需要斯库和价格来展示，但我不明白它们是如何不被传播的。
我最好的假设是在item.jsx，它只是通过产品，而不是滑雪和价格，所以我怎么做呢？
the export default ({product}) => <div>{product}</div>;
这就是我的组件的布局方式。APP组件>列表组件>列表组
浏览 4提问于2016-04-03得票数 1
回答已采纳
3回答
this.state.elements.map不是一个函数
javascript、reactjs
我正在尝试输入文本框中的值，并通过设置react状态在按钮单击中打印它们。我正在推送数组中的对象，在一个状态下初始化，文本框的值正在推送，但没有被映射。它产生错误this.state.elements.map不是一个函数
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
class App extends Component {
constructor(props) {
super(props);
浏览 0提问于2019-01-04得票数 2
回答已采纳
2回答
如何在react中的div类=‘App’之前添加多个静态html元素？
html、css、reactjs
由于特殊的样式原因，我需要在reactjs网页之前添加3个空div，但是如果我这样做，我会得到一个错误：
解析错误:相邻的JSX元素必须包装在一个封闭标记中。您想要JSX片段<>.</>吗？
我需要的是
<div id="one"></div>
<div id="two"></div>
<div id="three"></div>
<div class='App'>
...
</div>
浏览 3提问于2020-08-19得票数 1
回答已采纳
7回答
如何结合腾讯云开发微信小程序？
api、serverless、html5
目前，微信小程序越来越流行，而且功能越来越强大，在性能方面也越做越好。因为能够原生调用小程序提供的组件和 API ，小程序的开发快捷，使用方便，越来越多的产品会落地到微信小程序上。但传统的微信小程序开发，和普通的H5页面开发或者原生APP开发相比，只是改变了前端部分的开发方式，还是离不开厚重的后台开发。 现在的小程序，在后台服务方面，正在往 serverless 趋势方向发力。小程序提供了云厂商的无服务器函数 SCF，使得小程序无需搭建一个后台服务即可运行。如何结合腾讯云开发微信小程序？
浏览 3745提问于2018-09-28
1回答
如何同时呈现抽屉导航和Tab导航？
android、reactjs、react-native
我试图找到一种方法来使用抽屉导航和Tab导航在反应本土化。当我试图将组件放在一起时，我得到了以下错误：
相邻的JSX元素必须封装在一个封闭标记中。
到目前为止，我得到的是：
/* Imports */
import React, {Component} from 'react';
import {AppRegistry, Text, View, StyleSheet, TouchableHighlight, TouchableOpacity, YellowBox} from 'react-native';
import { StackNavigator
浏览 0提问于2018-04-04得票数 2
1回答
基本ReactJS组件路由
react.js、jsx
最近，我开始学习ReactJS，我不希望制作一个网页网站，所以我学到了react-router，这是我的方法。
App.js
import React, { Component } from "react";
import "babel-polyfill";
import Navbar from "./Components/MenuNavbar";
import Footer from "./Components/Bottom";
import Home from "./Components/Home";
impo
浏览 0提问于2018-10-04得票数 3
回答已采纳
1回答
如何在电子商务网站上显示单一产品的详细信息？
javascript、reactjs、arrays、react-router-dom、router
我正在创建一个电子商务网站，我想做一个功能，在那里，如果用户点击一个特定的产品，用户应该能够看到该特定产品的产品细节。我想在react router中实现这一点，我应该如何传递id并显示特定产品的细节。
Product.jsx
import React, { useState } from 'react'
// import Button from '@mui/material/Button';
import HotelData from "../src/HotelData.json"
import Icons from './c
浏览 6提问于2022-09-29得票数 0
2回答
使两个组件在反应中彼此相邻
javascript、reactjs、react-dom
我试图从另一个组件中调用一个组件来显示一些html，如果我单独调用该组件，它就会工作，但是如果我在同一个返回函数中添加了更多的标记，它会引发以下错误：
Adjacent JSX elements must be wrapped in an enclosing tag (9:12) while parsing file
Product.jsx
var React = require('react');
var Product = React.createClass({
render: function() {
return (<p>Produ
浏览 9提问于2016-06-01得票数 4
回答已采纳
4回答
仅根据Typescript中的ID映射特定对象
javascript、reactjs、typescript
我有一个对象数组，如下所示： const cartItems = [
{
id: 1,
new1: "Hello",
new2: "New hello"
},
{
id: 2,
new1: "Hello",
new2: "New hello"
},
{
id: 3,
new1: "Hello",
new2: "New hello"
}
]; 我目前正在使用这个对象数组来映射所有项目，如下所示： cart
浏览 37提问于2021-07-26得票数 0
回答已采纳
2回答
React.js解析错误:相邻的JSX元素必须包装在一个封闭标记中。您想要JSX片段<>.</>吗？
javascript、css、reactjs、react-bootstrap
我正在尝试用引导程序构建一个react应用程序，该应用程序将显示类似于C的卡片，显示为连续3行，并显示为3行，但我得到了以下错误：
解析错误:相邻的JSX元素必须包装在一个封闭标记中。你想要<>片段吗.？
以下是代码：
import React from 'react';
import './App.css';
import "bootstrap/dist/css/bootstrap.min.css";
import { Card } from "react-bootstrap";
import { Button }
浏览 5提问于2020-02-24得票数 1
2回答
必须返回有效的React元素(或null)，但不能返回。
javascript、reactjs、ecmascript-6、redux、react-redux
嗨，我是新来的反应和还原，我创建了一个poc并得到了这个错误，尽管我的努力，我无法解决这是我的代码。
购物-app/app/index.jsx
import React, { Component } from 'react'
import ReactDOM from 'react-dom'
import {createStore} from 'redux'
import reducer from './reducers/index.js'
import {Provider} from 'react-redux'
l
浏览 6提问于2017-09-24得票数 0
回答已采纳
我正在寻找一种更有效的方法(如果有的话)来编写一些代码，这样我就可以在“A”悬停时更改元素‘B’和'C‘的规模，反之亦然。我已经设法让它在中工作，但我希望有更好的方法来实现它。沿着这条路走下去，我希望能够将它合并到一个旋转木马中，或者类似的东西，而不会有过多的代码困扰着这个站点。
到目前为止，jQuery是这样的：
$("#element1") // select your element
.hover(function(){ // trigger the mouseover event
$("#element2, #element3") //
浏览 1提问于2016-02-18得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
云直播活动推荐
腾讯云开发者
