相邻的 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(

 <div>This></div>

 <div>is></div>

 <div>Bad></div>

)

好的

return(

 <div>

   <div>This></div>

   <div>is></div>

   <div>Good></div>

 </div>

)

只需将所有内容包装在 a 中<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;

Answer 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;

注意：正如马特指出的那样，它不必是片段，也可以是 div 或其他一些标签。

Answer 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;