我对代码的质量提前表示歉意。 当我尝试将html代码放入gatsby.js项目并进入index.js页面时,出现此错误:
./src/components/section3.js中的错误 模块构建失败(来自./node_modules/gatsby/dist/utils/babel-loader.js): 语法错误:/path/src/components/section3.js:相邻JSX元素必须包装在一个封闭标签中。您是否想要JSX片段 <> ...? (26:8)
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;
答案 0 :(得分:2)
读取错误。您需要将JSX包装成碎片。 React无法渲染具有多个子代的组件,您应该使用<>
标记和</>
标记来包装所有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>
</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或其他标记。
答案 1 :(得分:1)
您需要将所有内容包装在标签中。
您可以使用std::tuple
,它不会创建DOM元素,并且会执行类似的操作:
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;
答案 2 :(得分:1)
您需要阅读您的错误:
./src/components/section3.js中的错误模块构建失败(来自./node_modules/gatsby/dist/utils/babel-loader.js):语法错误:/path/src/components/section3.js:相邻JSX元素必须包装在一个封闭标签中。您是否想要JSX片段<> ...? (26:8)
相邻的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>
)
只需将所有内容包装在<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;
答案 3 :(得分:1)
Baldráni的回答是正确的,但他没有解释为什么需要它。
默认情况下,任何接收子组件的组件都只能接受1个组件作为其子组件。
所以,这可能是一个错误:
<Component>
<div>something</div>
<div>other thing</div>
</Component>
某些组件,例如<div>
,可以接受多个组件作为子组件,因此以下内容应该可以:
<div>
<div>something</div>
<div>other thing</div>
</div>
但是,当您声明一个具有2个div的独立组件时,如下所示,React无法知道是否要将其用作另一个组件的唯一子组件。
// YourComponent.js
<div>something</div>
<div>other thing</div>
因此,您可以将其包装在Fragment中,以仅返回一个组件:
// YourComponent.js
<React.Fragment>
<div>something</div>
<div>other thing</div>
</React.Fragment>
一种更好的语法是:
// YourComponent.js
<>
<div>something</div>
<div>other thing</div>
</>
Fragment
不会不在DOM上创建新元素,它只是将子元素进行分组。