问题：
相邻的JSX元素必须包装在一个封闭的标记-gatsby.js中
束高雅
我为代码的质量提前道歉。当我尝试将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片段吗
import React, { Component } from "react"
import "../css/section3.css"
class Section3 extends React.Component{
constructor(props){
super(props);
}
render(){
return(
<section>
<div class="product-banners wt-offset-top-24">
<div class="product-banners__item _toolbox">
<h3 class="product-banners__title _color-light">Lorem ipsum</h3>
<div class="product-banners__btn-wrap wt-offset-top-12">
<a class="wt-button wt-button_theme_dark wt-button_size_m wt-button_mode_outline"
href="/toolbox/app/">Lorem ipsum
</a>
</div>
</div>
<div class="product-banners__item _annual-report">
<h3 class="product-banners__title">Lorem ipsum</h3>
<div class="product-banners__btn-wrap wt-offset-top-12">
<a class="wt-button wt-button_size_m wt-button_mode_outline" href="/annualreport/2018/">Lorem ipsum</a>
</div>
</div>
</div>
</section>
<div class="section-content _bg-extra-dark home-page__section-content _appreciated">
<div class="page-segment pad segment-skyblue">
<div class="large-image-block">
<div class="large-image-block_wrap-img flipped">
<div class="large-image-block_img">
<img src="image-path" alt=""></img>
</div>
</div>
<div class="large-image-block_wrap">
<div class="container">
<div class="row">
<div class="large-image-block_col col-md-5 col-lg-4 col-lg-offset-1 col-md-push-6 col-lg-push-5">
<div class="large-image-block_video"></div>
</div>
<div class="large-image-block_col col-md-5 col-lg-4 col-md-offset-2 col-lg-offset-3 col-md-pull-7 col-lg-pull-8">
<div class="red_content centered">
<div class="lead-text">Lorem ipsumLorem ipsum</div>
<h2 class="header_style-2">Lorem ipsumLorem ipsum</h2>
<div class="callout_style-1">
<p>Lorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem
ipsumLorem ipsum</p>
<p>
<a href="/academics/majors-programs" class="btn btn-160 btn-outline-white">Lorem
ipsum</a>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
);
}
}
export default Section3;
共有3个答案
郭逸清
你需要把所有东西都用标签包起来。
您可以使用不创建DOM元素的Fragment并执行以下操作：
import React, { Component, Fragment } from "react"
import "../css/section3.css"
class Section3 extends React.Component{
constructor(props){
super(props);
}
render(){
return(
<Fragment>
<section>
....
</section>
<div class="section-content _bg-extra-dark home-page__section-content _appreciated">
....
</div>
</Fragment>
);
}
}
export default Section3;
傅鸿波
您需要读取您的错误：
./src/components/section3.js模块构建失败时出错（来自./node_modules/gatsby/dist/utils/babel loader.js）：SyntaxError:/path/src/components/section3.js：相邻的JSX元素必须包装在一个封闭标记中。你想要一个JSX片段吗
相邻的JSX元素必须包装在一个封闭的标记中。你想要一个JSX片段吗
JSX项目必须仅包装在一个封闭标签中：
令人不快的
return(
<div>This></div>
<div>is></div>
<div>Bad></div>
)
好的
return(
<div>
<div>This></div>
<div>is></div>
<div>Good></div>
</div>
)
只需用包装所有内容
import React, { Component } from 'react';
import '../css/section3.css';
class Section3 extends Component {
constructor(props) {
super(props);
}
render() {
return (
<div>
<section>
<div class="product-banners wt-offset-top-24">
<div class="product-banners__item _toolbox">
<h3 class="product-banners__title _color-light">Lorem ipsum</h3>
<div class="product-banners__btn-wrap wt-offset-top-12">
<a
class="wt-button wt-button_theme_dark wt-button_size_m wt-button_mode_outline"
href="/toolbox/app/">
Lorem ipsum
</a>
</div>
</div>
<div class="product-banners__item _annual-report">
<h3 class="product-banners__title">Lorem ipsum</h3>
<div class="product-banners__btn-wrap wt-offset-top-12">
<a
class="wt-button wt-button_size_m wt-button_mode_outline"
href="/annualreport/2018/">
Lorem ipsum
</a>
</div>
</div>
</div>
</section>
<div class="section-content _bg-extra-dark home-page__section-content _appreciated">
<div class="page-segment pad segment-skyblue">
<div class="large-image-block">
<div class="large-image-block_wrap-img flipped">
<div class="large-image-block_img">
<img src="image-path" alt="" />
</div>
</div>
<div class="large-image-block_wrap">
<div class="container">
<div class="row">
<div class="large-image-block_col col-md-5 col-lg-4 col-lg-offset-1 col-md-push-6 col-lg-push-5">
<div class="large-image-block_video" />
</div>
<div class="large-image-block_col col-md-5 col-lg-4 col-md-offset-2 col-lg-offset-3 col-md-pull-7 col-lg-pull-8">
<div class="red_content centered">
<div class="lead-text">Lorem ipsumLorem ipsum</div>
<h2 class="header_style-2">Lorem ipsumLorem ipsum</h2>
<div class="callout_style-1">
<p>
Lorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem
ipsumLorem ipsumLorem ipsumLorem ipsum
</p>
<p>
<a
href="/academics/majors-programs"
class="btn btn-160 btn-outline-white">
Lorem ipsum
</a>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
);
}
}
export default Section3;
谭梓
读取错误。您需要将JSX包装在片段中。React无法呈现具有多个子组件的组件，您应该用一个开头
import React, { Component } from "react";
import "../css/section3.css";
class Section3 extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<>
<section>
<div class="product-banners wt-offset-top-24">
...
</div>
</section>
<div class="section-content _bg-extra-dark home-page__section-content _appreciated">
<div class="page-segment pad segment-skyblue">
...
</div>
</div>
</>
);
}
}
export default Section3;
注意：正如Matt指出的，它不一定是片段，它也可以是div或其他标记。
类似资料：
-
我一直在尝试将一个html网站移植到Gatsbyjs并做出反应。在构建header Comparement时，我在带有的行中得到一个错误“相邻的JSX元素必须包装在一个封闭的标记中”。我想不出这个问题，请你帮忙。我使用有状态组件构建它的原因是，稍后我将向它添加一些额外的功能。 这是我的代码：
-
我试图在页面中显示文章，但我遇到了一些问题，需要在reactjs中封装标签。看起来React不接受相邻的相同标记如何显示表格数据？ 有人知道问题出在哪里吗？
-
我有以下返回语句，即给出错误任何想法是错误的？
-
相邻的JSX元素必须包装在一个封闭的标记reactjs中 我的代码有什么问题？？ 错误代码调用如下： 相邻的JSX元素必须包装在一个封闭的标记中 代码在元素标记中出错
-
我试图打印道具的反应组件，但得到一个错误。请帮助： 片段： 我在等“你好，亲爱的！”然后下一行是“蓝色”。但是，我得到了这个错误。 错误：
-
我有下面的代码是react.js这是抛出一个错误 “相邻的JSX元素必须包装在一个封闭的标记中”。看起来React不接受相邻的相同标记如何显示表格数据？