相邻的 JSX 元素必须包含在封闭标签中 - gatsby.js

Question

我提前为代码的质量道歉。当我尝试将我的 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>

Answer 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(&nbsp;<div>This></div>&nbsp;<div>is></div>&nbsp;<div>Bad></div>)好的return(&nbsp;<div>&nbsp; &nbsp;<div>This></div>&nbsp; &nbsp;<div>is></div>&nbsp; &nbsp;<div>Good></div>&nbsp;</div>)只需将所有内容包装在 a 中<div/>，我已经为您完成了，所以只需包装代码并使用它！import React, { Component } from 'react';import '../css/section3.css';class Section3 extends Component {&nbsp; constructor(props) {&nbsp; &nbsp; super(props);&nbsp; }&nbsp; render() {&nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; &nbsp; <section>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="product-banners wt-offset-top-24">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="product-banners__item _toolbox">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h3 class="product-banners__title _color-light">Lorem ipsum</h3>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="product-banners__btn-wrap wt-offset-top-12">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; class="wt-button wt-button_theme_dark wt-button_size_m wt-button_mode_outline"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; href="/toolbox/app/">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Lorem ipsum&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </a>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="product-banners__item _annual-report">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h3 class="product-banners__title">Lorem ipsum</h3>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="product-banners__btn-wrap wt-offset-top-12">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; class="wt-button wt-button_size_m wt-button_mode_outline"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; href="/annualreport/2018/">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Lorem ipsum&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </a>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; </section>&nbsp; &nbsp; &nbsp; &nbsp; <div class="section-content _bg-extra-dark home-page__section-content _appreciated">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="page-segment pad segment-skyblue">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="large-image-block">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="large-image-block_wrap-img flipped">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="large-image-block_img">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <img src="image-path" alt="" />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="large-image-block_wrap">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="container">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="row">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="large-image-block_col col-md-5 col-lg-4 col-lg-offset-1 col-md-push-6 col-lg-push-5">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="large-image-block_video" />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <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">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="red_content centered">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="lead-text">Lorem ipsumLorem ipsum</div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h2 class="header_style-2">Lorem ipsumLorem ipsum</h2>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="callout_style-1">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Lorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ipsumLorem ipsumLorem ipsumLorem ipsum&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; href="/academics/majors-programs"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; class="btn btn-160 btn-outline-white">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Lorem ipsum&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </a>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; );&nbsp; }}export default Section3;

Answer 2

阅读错误。您需要将 JSX 包装在片段中。React 无法渲染具有多个子组件的组件，您应该使用开始<>标记和结束</>标记包装所有 JSX ，如下所示：import React, { Component } from "react";import "../css/section3.css";class Section3 extends React.Component {&nbsp; constructor(props) {&nbsp; &nbsp; super(props);&nbsp; }&nbsp; render() {&nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; <>&nbsp; &nbsp; &nbsp; &nbsp; <section>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="product-banners wt-offset-top-24">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ...&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; </section>&nbsp; &nbsp; &nbsp; &nbsp; <div class="section-content _bg-extra-dark home-page__section-content _appreciated">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="page-segment pad segment-skyblue">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ...&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; </>&nbsp; &nbsp; );&nbsp; }}export default Section3;注意：正如马特指出的那样，它不必是片段，也可以是 div 或其他一些标签。

Answer 3

您需要将所有内容都包装在一个标签中。您可以使用不创建 DOM 元素的Fragment并执行以下操作：import React, { Component, Fragment } from "react"import "../css/section3.css"class Section3 extends React.Component{&nbsp; &nbsp; constructor(props){&nbsp; &nbsp; &nbsp; &nbsp; super(props);&nbsp; &nbsp; }&nbsp; &nbsp; render(){&nbsp; &nbsp; &nbsp; &nbsp; return(&nbsp; &nbsp; &nbsp; &nbsp; <Fragment>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <section>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ....&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </section>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="section-content _bg-extra-dark home-page__section-content _appreciated">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ....&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</div>&nbsp; &nbsp; &nbsp; &nbsp; </Fragment>&nbsp; &nbsp; );}}export default Section3;