[英]Parsing error: Adjacent JSX elements must be wrapped in an enclosing tag
While im building react route for my react app The Error show up当我为我的反应应用程序构建反应路线时出现错误
Parsing error: Adjacent JSX elements must be wrapped in an enclosing tag.
解析错误:相邻的 JSX 元素必须包含在封闭标记中。
Below is my code下面是我的代码
class App extends Component {
render () {
return (
//Make App Running within Browser Router//
<BrowserRouter>
<div className="navbar">
<Navbar />
<Route exact path='/' component={Home} />
<Route path='/chat' component={Chat} />
<Route path='/about' component={About} />
</div>
</BrowserRouter>
<div className="main-container"> **==> This is when problem show**
<Searchapp />
</div>
);
}
}
export default App;
Thanks谢谢
You must encapsulate the JSX with a parent node.您必须使用父节点封装 JSX。 You can make use of a div element or if you don't want to add an extra element in the DOM, you can make use of React Fragment <>
你可以使用 div 元素,或者如果你不想在 DOM 中添加额外的元素,你可以使用 React Fragment <>
class App extends Component {
render () {
return (
<>
<BrowserRouter>
<div className="navbar">
<Navbar />
<Route exact path='/' component={Home} />
<Route path='/chat' component={Chat} />
<Route path='/about' component={About} />
</div>
</BrowserRouter>
<div className="main-container"> **==> This is when problem show**
<Searchapp />
</div>
</>
);
}
}
export default App;
We are not allowed to assign multiple JSX elements to a single variable, not valid JavaScript syntax.我们不允许将多个 JSX 元素分配给单个变量,这不是有效的 JavaScript 语法。
You are trying to place some sibling elements next to each other but you have to have a single outside tag, but what if adding an extra <div>
tag throws off your styling?您正在尝试将一些同级元素彼此相邻放置,但您必须有一个外部标签,但是如果添加额外的
<div>
标签会破坏您的样式怎么办?
So what the previous answer offered is called React.Fragment
which is a JSX looking element that will allow you to assign multiple elements to a single variable but when rendered to a screen it will not produce any visible element to the DOM.因此,前面提供的答案称为
React.Fragment
,它是一个 JSX 外观元素,允许您将多个元素分配给单个变量,但是当呈现到屏幕时,它不会为 DOM 生成任何可见元素。
It would look something like this:它看起来像这样:
const ObjectDelete = () => {
const actions = (
<React.Fragment>
<button className="ui button negative">Delete</button>
<button className="ui button">Cancel</button>
</React.Fragment>
);
which is basically the long form which can be shortened like so:这基本上是可以缩短的长形式,如下所示:
const ObjectDelete = () => {
const actions = (
<>
<button className="ui button negative">Delete</button>
<button className="ui button">Cancel</button>
</>
);
Or if it's more helpful for you since you presented a class component:或者,如果它对您更有帮助,因为您提供了一个类组件:
class ObjectDelete extends React.Component {
renderActions() {
return (
<React.Fragment>
<button className="ui button negative">Delete</button>
<button className="ui button">Cancel</button>
</React.Fragment>
);
}
Make note that at this point the JSX with <React.Fragment>
is enclosed inside a helper function.请注意,此时带有
<React.Fragment>
的 JSX 包含在辅助函数中。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.