JSX片段没有对应的结束标记
JSX（JavaScript XML）是一种用于在JavaScript中编写HTML结构的语法扩展。它通常与React一起使用，用于构建用户界面。在JSX中，可以使用类似HTML的标记语法来描述UI组件的结构。
对于JSX片段没有对应的结束标记的情况，可能是由于以下几种原因：
- 错误的语法：在编写JSX代码时，可能会出现错误的语法，导致没有正确闭合标记。例如，忘记了添加闭合标签或自闭合标签。
- 片段语法：JSX片段是一种特殊的语法，它允许在不需要根元素的情况下编写多个元素。在使用片段语法时，可以使用空标签或<React.Fragment>标签来包裹多个元素。如果没有正确使用片段语法，可能会导致没有对应的结束标记。
针对这个问题，可以采取以下解决方法：
- 检查语法错误：仔细检查JSX代码，确保所有的标签都有正确的闭合。确保没有遗漏的结束标记或自闭合标签。
- 使用片段语法：如果需要在JSX中编写多个元素而不需要根元素，可以使用片段语法。例如：
<>
<div>Element 1</div>
<div>Element 2</div>
</>或者使用<React.Fragment>标签：
<React.Fragment>
<div>Element 1</div>
<div>Element 2</div>
</React.Fragment>这样可以确保在没有根元素的情况下编写多个元素。
腾讯云相关产品和产品介绍链接地址：
腾讯云提供了一系列与云计算相关的产品和服务，包括云服务器、云数据库、云存储、人工智能等。以下是一些相关产品和对应的链接地址：
- 云服务器（CVM）：提供弹性计算能力，支持多种操作系统和应用场景。了解更多：云服务器产品介绍
- 云数据库MySQL版（CDB）：提供高性能、可扩展的关系型数据库服务。了解更多：云数据库MySQL版产品介绍
- 对象存储（COS）：提供安全、稳定、低成本的云存储服务，适用于各种数据存储和传输场景。了解更多：对象存储产品介绍
- 人工智能平台（AI）：提供丰富的人工智能服务，包括图像识别、语音识别、自然语言处理等。了解更多：人工智能平台产品介绍
请注意，以上链接仅供参考，具体的产品选择应根据实际需求进行评估和决策。
相关·内容
1回答
我正在尝试循环一个按钮，以便在UI上创建6个按钮。但是，我没有得到想要的输出，而是抛出一个错误。
错误:预期对应的JSX结束标记
有人能帮帮我吗。
所使用的代码如下：
...
renderButtons = () => {
const buttons = [];
for( let i = 0; i < 6; i++) {
buttons.push(
<Text>
i
</Text>
)
}
return buttons;
}
re
浏览 1提问于2017-08-14得票数 1
回答已采纳
3回答
在我的react with antd项目中有以下代码段
return (
{ bUseTooltip && <Tooltip text='test'> }
<Input
type="text"
value={value.strValue || strValue}
onFocus={funcTriggerFocus}
onChange={funcOnInputChange}
浏览 3提问于2020-07-25得票数 1
2回答
上面的代码是我在编译时遇到的一个错误:相邻的JSX元素必须包装在一个封闭的标记中。你想要JSX片段<>...</>吗？(53:4)
我试图在前端使用yarn start进行编译，但我遇到了这个错误。有什么想法要解决吗？
浏览 2提问于2021-05-23得票数 0
2回答
我试图在App.js中导入标头组件，但这会导致错误。
import './App.css';
import Headers from './Components/Header';
function App() {
return (
<div>
</Headers>
</div>
);
}
export default App;
Header.js
import React from "react";
export default function Headers(){
浏览 8提问于2022-03-14得票数 -2
回答已采纳
我试图做一个tiktok，但我有问题，输入文本到他们的标题部分(见下面的截图)。我试过使用等待元素clickable函数，但是由于某些原因，我不能使用selenium来检测这个元素，有人会对如何这样做有什么建议吗，谢谢:)
我的当前代码如下：
driver.get("https://www.tiktok.com/upload?lang=en")
try:
element = WebDriverWait(driver, waittime).until(EC.element_to_be_clickable((By.CSS_SELECTOR, '#root >
浏览 6提问于2022-07-25得票数 0
1回答
我不知道我有什么问题--在谷歌或ESLint手册上找不到合适的匹配。
考虑页面，在那里我想有内部链接到某个部分(例如。(至评论部分)：
...
<a href="#comments">Comments: 3</a>
...
<a name="comments"/>
...
在这样的代码中，我有两个问题要解决：
第二个链接没有内容(如果在这种情况下我不想有内容呢？)
第二个链接没有href攻击(而且它不应该是'void'，但是如果没有‘href’，该如何做呢？)
我在网上找不到任何帮助，所以我想知
浏览 0提问于2019-09-04得票数 0
回答已采纳
1回答
import React from 'react'
import './App.css'
import {BrowserRouter, Routes, Route} from 'react-router-dom';
const App = () => {
return (
<>
<BrowserRouter>
<h2>hello</h2>
</BrowserRouter>
</>
)
}
export
浏览 3提问于2022-11-25得票数 -1
1回答
import React from 'react';
class AjaxIO extends React.Component {
constructor(props) {
super(props);
this.state = {
count: "1"
}
}
render() {
return (
<div>
{this.state.count}
</div>
);
}
};
export default AjaxIO;
这
浏览 2提问于2016-04-06得票数 2
回答已采纳
我试图在给的消息中使用<FormattedMessage id="some:message" />。
背景
一些单词/文本对于移动屏幕上的一些父元素来说太大了，我们正在使用类似于布局的列，这对于移动环境来说是很难替代的。
想法
就像{p: function p(textFrag: string) :JSX.Element { return (<p>{textFrag}</p>); }}
我们需要像<FormattedMessage id="some:message" />这样的东西，
{"some:mess
浏览 6提问于2021-04-07得票数 1
回答已采纳
9回答
当我使用Ctrl+s保存这个文件时，甚至在视觉代码中使用更漂亮的javascript扩展名片段时，我得到的是显示错误的变形代码。
并将错误显示为：
JSX元素div没有相应的结束标记。
JSX元素Navbar没有相应的结束标记。
JSX元素NavbarBrand没有相应的结束标记。
期望的标识符。
>预期。
浏览 10提问于2018-11-02得票数 10
回答已采纳
1回答
如果这是直截了当的话。我正在学习一个教程，似乎出现了语法错误。我无法为以下内容找到正确的格式：
const productsToDisplay = this.props.shopData.shop.products
return (
<div classname="App">
<div classname="products-grid">
{productsToDisplay.edges.map((el, i)=> {
return(
浏览 2提问于2019-01-19得票数 2
回答已采纳
1回答
得到以下错误-
JSX元素“路由器”没有相应的结束标记。
对于这个密码-
<Router>
<div class="wrapper">
<Sidebar />
< Header />
<Content>
<Route exact path="/" component={Home} />
<ImportCode />
< /Content>
< Footer > I'
浏览 1提问于2018-06-13得票数 0
我得到了错误：
错误:意外令牌。你是说{'}'}还是}？JSX元素
使用此代码：
function CompositeCntl() {
return (
<div>
<Button />
<Display />
<div/>
);
}
浏览 2提问于2021-12-06得票数 2
我试图两次使用map函数返回一行。一个信息从一个地图获取，另一个从另一个地图获取。显然，在第二个映射函数中，我只能返回一个标记，而第二个标记给出了错误。
我尝试了下面的代码，它给出了一个错误“解析错误:相邻的JSX元素必须包装在一个封闭的标记中。您想要一个JSX片段<>.”吗？
tpList.map((val) => {
return (
<tr>
<th scope="row"
浏览 0提问于2019-09-06得票数 0
回答已采纳
我想知道您是否可以在代码生成框架中使用React/JSX。
有没有一种方法可以在JSX中执行类似下面的代码？
var className = "Person"
return (
//// public class {className}
//// {
////
//// }
);
其中/是一些特殊的字符或字符序列，它向JSX解析器发出信号，表明这应该只是纯文本？
或者有没有更好的方法来使用React呢？
浏览 0提问于2017-10-27得票数 0
解析错误:未终止的JSX内容。不知道为什么它总是说我需要另一个标签。另外，我遇到的一件事是如何处理自动关闭的HTML标记。我不知道为了JSX该怎么处理他们。
我尝试匹配所有的标记，并使用Atom创建一个Html文件和一个括号匹配器。我不知道为什么它总是给我这个错误。我想为自动关闭标签添加一个开始标记。
import React from 'react';
import linkedinIcon from "./footer-component/linkedin-icon.png";
export default class Resume extends
浏览 1提问于2019-08-01得票数 1
2回答
我是VSCode用户，当您关闭文件选项卡并再次打开时，定义语言是令人沮丧的，一直如此！在反应项目中。
因此，我尝试将我的header.js转换为header.jsx，它起了作用，我不需要一直定义语言。
但我不知道这是否是一个很好的练习，我所有的语法和片段似乎都很有效。
我可以在我的反应项目中使用jsx文件格式而不是JS吗？
浏览 4提问于2021-09-03得票数 0
回答已采纳
在我的node.js应用程序中，我使用react.js作为模板库。我正在为我的react组件使用jsx语法。我有一个像/entities这样的路径来呈现entities.jsx文件(它是一个视图)。我的entities.jsx文件中有以下代码。我试图在我的代码中调用onclick处理程序，但它不工作。我没有使用React.render显式呈现它，但当我点击localhost:/entities时，组件在浏览器中显示，但onclick处理程序没有触发。
var MyComponent = React.createClass({
alertMessage: function() {
浏览 1提问于2016-04-18得票数 0
错误: React.createElement:类型无效，应为字符串或类/函数，但已获取：。您是否意外地导出了JSX文本而不是组件？ class TestDynamic extends React.Component {
getSpan(value) {
return (<span>Spanned {value}</span>)
}
renderDynamicComponent() {
const Test = this.getSpan(1)
return (<div> <Test /> </sp
浏览 16提问于2019-06-12得票数 0
回答已采纳
1回答
我正在构建一个使用ReactJS标记的<video>组件。我在我的Webpack SyntaxError标签中得到了一个<source>。我相信Webpack认为我需要关闭<source>，但是在我在中看到的例子中，我相信我正确地遵循了HTML：
例：
<video width="480" controls poster="https://archive.org/download/WebmVp8Vorbis/webmvp8.gif" >
<source src="https://archive.o
浏览 2提问于2016-04-29得票数 1
回答已采纳
我知道，在“反应”中，不能向空片段添加键：
// will result in an error
< key={'foo'} >
{...}
</>
相反，您需要使用React.Fragment
// works fine
<React.Fragment key="foo">
{...}
</React.Fragment>
注意到了这一点，但它并没有解释为什么是，我很好奇。这是JSX中的一个限制吗？还是因为某种原因而做出的设计决定呢？
编辑:我找到了。听起来，Fragment是第一位的，然后是<&g
浏览 7提问于2022-10-13得票数 6
回答已采纳
3回答
你好，
我有一个React应用程序，我正在使用axios获取Blogger API。在响应中，有一个content属性。它包含HTML，但在如下字符串中：
{
"content": "<div> some content </div>"
}
因此，我使用react-html-parser包将其转换为JSX。
问题是，我想从这个<img/> JSX中获取第一个content，并且只显示它-隐藏其他元素。
我试着为*设置*，为img设置display: block，但是没有任何可见的东西--包括图像。
浏览 5提问于2020-07-08得票数 3
回答已采纳
如何在JSX标记中启用代码段完成功能以添加标记属性：
<View style={styles.styleName}>
我试图让这个代码片段工作，但它似乎只在标签之外工作：
"style": {
"scope": "javascript,typescript,jsx,html",
"prefix": "rs",
"body": ["style={ styles.${1} }"],
"description": "
浏览 1提问于2018-09-02得票数 1
回答已采纳
1回答
我一直收到这个import/no-unresolved错误，并且不确定如何修复它。我知道这和巴贝尔有关，但我不知道如何让巴贝尔和埃斯林特表现得更好。
我的babel.config.js文件：
module.exports = {
presets: [['@babel/preset-env', { targets: { node: 'current' } }], '@babel/preset-react'],
plugins: [
'babel-plugin-macros',
'@babel/plug
浏览 2提问于2020-09-30得票数 6
回答已采纳
2回答
有没有办法在VS Code中创建我自己的JSX用户片段？我尝试配置javascriptreact.json文件，但在React组件的返回语句中不起作用。使用javascript.json文件确实可以，但我不想在使用纯Javascript时看到这些代码片段。我也不想使用全局或项目代码片段。下面是一个JSX代码片段的示例：
"Create contact list": {
"prefix": "cl",
"body": [
"<div>",
"\t&l
浏览 30提问于2020-05-24得票数 0
回答已采纳
通过使用React功能组件，我们可以像这样呈现儿童：
import React from 'react';
const MyComponent = (props: React.PropsWithChildren) => {
return props.children;
}
然而，当我使用它时，我会得到一个错误：
...
return <MyComponent />;
...
或
...
return (
<MyComponent>
<div>hello</div&g
浏览 44提问于2022-08-08得票数 1
回答已采纳
我正在和Next JS一起开发网页。
在开发环境中，它运行良好，没有任何错误，但在产品环境中构建时，此错误消息显示：
类型错误:该JSX标记的“子”支柱需要一个类型为“ReactNode”的子级，但提供了多个子级。
我的密码在这里：
import React, { useState } from "react";
import { IconContext } from "react-icons";
import { AiOutlineClose } from "react-icons/ai";
import Modal from "rea
浏览 152提问于2022-04-13得票数 1
如JSX扩展中所定义的
interface JSXIdentifier <: Identifier {
type: "JSXIdentifier";
}
中JSXIdentifier和普通标识符的作用是什么？
浏览 0提问于2015-12-12得票数 1
我有一个初始字符串，其中的标记之间包含各种文本，该字符串可以包含嵌套的标记。我希望根据以下规则“去嵌套”字符串: 1)除了添加或删除一些标签之外，最终的字符串与初始字符串没有什么不同。2)在最后的字符串中，每一段文本都包含在最接近的一对标签中，这对标签将其包含在原始字符串中。如果有几个相等接近的对，结果是未指定的(但3)没有一段文本被赋予最终字符串中的新标签)。
因此，
[a]text1[/a]text2[b]text3[c]text4[/c]text5[/b]
[e]text6[f]text7[/e]text8[/f]
应该变成
[a]text1[/a]text2[b]text3[/b][c
浏览 0提问于2015-01-28得票数 1
我是react .getting的新手，这个错误Jsx片段没有相应的结束标记，这是我的代码 cart.js import React from "react";
export default function Cart(){
return < > Cart < />
} 添加product.js import react from "react";
export default function addproduct() {
return < > addproduct < /&g
浏览 696提问于2021-03-17得票数 0
回答已采纳
我说jsx应该在一个封闭标记<>.中是有错误的，但是只有当我放置了2条jsx行(在本例中是文本和图像)时。我做错什么了？
我是个初学者
export default class Bananas extends Component {
render() {
let pic = {
uri: 'https://upload.wikimedia.org/wikipedia/commons/d/de/Bananavarieties.jpg'
};
return (
<Text>AAAAAAAAAAAAAAAAA
浏览 0提问于2019-08-23得票数 2
回答已采纳
1回答
我有这样的一个例子，在把手，我们可以有条件地渲染只是家长打开div，现在，我移动到反应，所以得到以下问题。
const ProductBlock: FC<Props> = (props: Props): JSX.Element => (
<div className="image">
// render the opening div conditionally
{
props.showImage ?
(
<div className="show-revie
浏览 4提问于2020-07-07得票数 0
回答已采纳
4回答
我正在为崇高/TextMate语言文件中的一些语法突出显示处理正则表达式，它要求我在一个非自结束的html标记上“开始”，并在相应的结束标记上结束：
begin：(<)([a-zA-Z0-9:.]+)[^/>]*(>)
结尾：(</)(\2)([^>]*>)
到目前为止，到目前为止，我能够捕获标记名，并且它能够匹配，以便能够为标记之间的区域应用适当的模式。
jsx-tag-area:
begin: (<)([a-zA-Z0-9:.]+)[^/>]*>
beginCaptures:
'1&#
浏览 4提问于2014-08-04得票数 8
1回答
如果条件等于true，我会尝试有条件地呈现一些元素。但据我所知，它给了我一个“解析错误:相邻的JSX元素必须包装在一个封闭的标记中。你想要一个JSX片段<>...吗？”就在35行上面和下面。我将我的整个代码包装在一个React.Fragment标记中。请帮帮忙。我不明白为什么我会得到这个错误。 import './ProfilePage.css';
import JournalCard from '../../components/JournalCard/JournalCard';
import { Link } from 'react-r
浏览 449提问于2020-07-22得票数 0
我有以下html代码片段：
<p>
<a href="https://www.google.com" target="_blank" onclick="s_objectID="https://www.google.com/_1";return
<span class>"ms-rteStyle-external-link-small">
"Production Efficiency Status"
::after
</s
浏览 0提问于2018-10-02得票数 0
我是新来的。
我正在尝试使用renderToStaticMarkup呈现组件(jsx)，但我得到了以下错误：
错误：
Invariant Violation: Invalid tag: <html data-reactroot="" data-reactid="1" data-re....
server.js (片段)
var html = ReactDOMServer.renderToStaticMarkup(
React.createElement(
ReactDOMServer.renderToStri
浏览 6提问于2016-10-06得票数 0
我在网上发现了一个类似的问题，但这些解决方案对我的课程没有帮助。我对打字很陌生，所以我想我可能错过了一些很简单的东西。我在Nextjs上有一个简单的应用程序。它呈现得很好，但是当我试图在本地构建它时，我得到了这个错误：
import { useState } from 'react'
import Sidebar from './sidebar';
import LayoutContent from './layout_content';
type Props = {
children: JSX.Element | JSX.Element[
浏览 4提问于2022-10-20得票数 0
回答已采纳
由于特殊的样式原因，我需要在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
回答已采纳
我想为我自己的使用创建一个自定义代码段，我现在想为@情感/核心创建一个代码片段。
我总是希望/** @jsx jsx */在我的jsx文件上。因此，当我在第9行导入我的模块时，import {css, jsx} from '@emotion/core在第9行，/** @jsx jsx */在第0行。我怎样才能做到这一点？
当前片段：
"Import emotion":{
"prefix":"ime",
"description": "Import emotion",
"bod
浏览 1提问于2020-05-22得票数 0
回答已采纳
我有一个Vue.js组件文件(框架是类星体)，在<template>中，我有以下代码块：
<q-btn
color="green"
label="save & continue editing"
@click="saveCase()"
/>
这是其他代码的一部分。
TypeScript突出显示此代码为错误：
错误的详细信息：
[{
"resource": "/D:/dev-pro/secops-cases/front/src/components/Case.vue&#
浏览 2提问于2022-06-08得票数 0
回答已采纳
如何在我的应用程序中呈现React组件？
我在我的head部分中添加了以下3行：
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.3.2/umd/react.production.min.js"></script>
<script src="htt
浏览 1提问于2018-05-16得票数 0
回答已采纳
我试着理解为什么浏览器显示诗句的方式有区别？
下面是一个例子:代码片段#1的预期输出是三个方框，并排:黑色、蓝色、红色。代码片段2只显示黑色和红色-为什么不是在代码片段2？中呈现的蓝色框？
1：
<div style="float:left; width:50px; height:50px; background:black;"></div>
<div style="float:left; width:50px; height:50px; background:blue;"></div>
<div sty
浏览 1提问于2011-07-19得票数 14
回答已采纳
ReactJs医生说：
有时，当我们将<div>元素添加到JSX以使我们的反应代码工作时，我们会破坏HTML语义，特别是当我们使用lists (<ol>, <ul> and <dl>)和HTML时。在这种情况下，我们应该使用React片段将多个元素组合在一起。
参考文献：
我真的很想了解，如何通过使用<div>或上面提到的其他元素来打破HTML语义，以及如何使用React片段是对此的一个改进。
此外，我想了解，打破这种语义学可能产生的问题是什么。
提前谢谢。
浏览 0提问于2018-10-23得票数 3
回答已采纳
2回答
我试图在我的web应用程序上构建一个功能，从Spotify的API中提取预览url，并在用户单击音频控件时播放预览。我可以保存正确的URL在源，但歌曲不播放。我看了看，但还是没能让它开始工作。以下是我在JSX中的代码片段：
<div className="audio-container">
<audio controls="controls">
<source src={this.props.songs[2].href} type="audio"/>
</audio>
<p
浏览 2提问于2017-10-16得票数 3
回答已采纳
我正在尝试添加一个PayPal的‘捐赠’按钮到一个使用Meteor构建的React应用程序中。
我已经将PayPal网站生成的代码粘贴到“DonateButton.jsx”目录中的一个文件中：
import React from 'react';
function DonateButton() {
return (
<form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
<input type=&
浏览 1提问于2018-03-15得票数 0
回答已采纳
在Sublime Text 3中，我使用了Babel包来突出显示JSX中的HTML代码。
然而，HTML代码没有自动完成功能，比如包装在render()块中的自动完成功能。我们如何为HTML代码启用自动完成功能？
浏览 0提问于2016-05-20得票数 5
3回答
使用登录函数作为组件会抛出这样的错误：'LoginModal‘没有定义react/jsx-no-undef我不知道为什么会发生这种情况。提前谢谢。
export default class Login extends Component {
state={
loading: false,
modalShow: false,
clicked: false,
password:''
}
LoginModal = () => {
return <Modal
浏览 0提问于2020-11-12得票数 0
我有一个变量来检查一个对象是否为空.
const objEmpty = _.isEmpty(objStudent); // returns false because its not empty
如何证明嵌入表达式是jsx代码？
这就是我所拥有的：{if empty == false ? <p>Empty<p> : <p>not empty</p>}
我怎么才能查到这样的东西.？
浏览 1提问于2016-05-19得票数 0
回答已采纳
(使用浏览器中的)当从普通的javascript调用react组件时，我得到了一个未显示的ReferenceError。
我试图从我的javascript应用程序中调用一个React.js (0.12.2)组件。我有一个JQuery document.ready处理程序可以这样做。
它接缝，在浏览器中的JSX编译器需要一段时间才能准备好使用react的组件。
在这种情况下，Document.ready可能不是一种选择。
见下面的例子：
index.html：
<!DOCTYPE html>
<html>
<head lang="en">
浏览 3提问于2015-02-22得票数 5
回答已采纳
我知道箭头函数体可以包含在方括号中，但是当它没有方括号时，是什么决定了函数何时终止呢？
我不确定这个问题是否适用于ES6，或者它是否特定于ReactJS或JSX，但我在React中有以下函数，就在它的正下方，我有一个类声明的开头，这不在该函数的作用域内：
const Search = ({ value, onChange, children }) =>
<form>
{children} <input
type="text"
value={value}
onChange={onChange}
/
浏览 0提问于2018-12-21得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
