相鄰的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創建一個新元素，它只是群體兒童元素。

檢查文檔以獲取官方解釋