Соседние элементы 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;

Примечание: как указал Мэтт, это не обязательно должен быть фрагмент, это может быть тоже div или какой-то другой тег.

Answer 2

Ответ Балдрани верный, но он не объяснил, зачем он нужен.

По умолчанию любой компонент, который получает дочерний элемент, принимает только 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>

Таким образом, вы можете заключить его во фрагмент длявернуть только один компонент:

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

Более приятный синтаксис:

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

Fragment делает не создание нового элемента в DOM, этопросто группирует дочерний элемент.

Проверьте документы для официального объяснения

Answer 3

Вам нужно прочитать вашу ошибку:

ОШИБКА в ./src/components/section3.js Сбой сборки модуля (из ./node_modules/gatsby/dist/utils/babel-loader.js): SyntaxError: /path/src/components/section3.js: смежный Элементы JSX должны быть заключены в тег. Вы хотели фрагмент JSX <> ...? (26: 8)

Соседние элементы JSX должны быть заключены в тег. Вы хотели фрагмент JSX <> ...? Что это значит?

Элементы JSX должны быть упакованы только в один тег:

BAD

return(
 <div>This></div>
 <div>is></div>
 <div>Bad></div>
)

GOOD

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

Вам нужно обернуть все в тег.

Вы можете использовать Фрагмент , который не создает элемент DOM и делает что-то вроде:

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;