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

Question

对于代码的质量，我提前表示歉意。当我尝试将 html 代码放入 gatsby.js 项目并放入 index.js 页面时，出现此错误：

./src/components/section3.js 中的错误模块构建失败（来自 ./node_modules/gatsby/dist/utils/babel-loader.js）： SyntaxError: /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;

Note: as Matt pointed out, it doesn't have to be a fragment, it can be a div too or some other tag.

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

您需要阅读您的错误：

ERROR in ./src/components/section3.js Module build failed (from ./node_modules/gatsby/dist/utils/babel-loader.js): SyntaxError: /path/src/components/section3.js: Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>...? (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

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>

所以你可以将它包装在一个片段中，return只有一个组件：

// YourComponent.js
<React.Fragment>
    <div>something</div>
    <div>other thing</div>
</React.Fragment>

更好的语法是：

// YourComponent.js
<>
    <div>something</div>
    <div>other thing</div>
</>

Fragment 不会在 DOM 处创建一个新元素，它只是将子元素分组。

Check the docs for official explanation

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

Adjacent JSX elements must be wrapped in an enclosing tag - gatsby.js

html

javascript

reactjs

gatsby