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

Answer 1

读取错误。 您需要将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或其他标记。

Answer 2

您需要将所有内容包装在标签中。

您可以使用不创建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;

Answer 3

您需要阅读您的错误：

./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;

Answer 4

巴尔德兰尼的答案是正确的，但他没有解释为什么需要它。

默认情况下，任何接收子组件的组件都只接受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创建一个新元素，它只是群体儿童元素。

检查文档以获取官方解释