Ошибка — ошибка синтаксического анализа: содержимое JSX не завершено

Я получаю сообщение об ошибке:

Parsing error: Unterminated JSX contents

Это мой код:

<div class = "hero-wrap js-fullheight" style = "background-image: url('images/bg_1.jpg');" data-stellar-background-ratio = "0.5">
    <div class = "overlay"></div>
    <div class = "container">
        <div class = "row no-gutters slider-text js-fullheight align-items-center justify-content-start" data-scrollax-parent = "true">
            <div class = "col-xl-10 ftco-animate" data-scrollax = " properties: { translateY: '70%' }">
                <h1 class = "mb-4" data-scrollax = "properties: { translateY: '30%', opacity: 1.6 }"> Get <br/><span>your Things Done</span></h1>
                <p class = "mb-4" data-scrollax = "properties: { translateY: '30%', opacity: 1.6 }">Over 10K People across Sri Lanka
                    <br/><span> are willing to Help you</span></p>

            </div>
        </div>
    </div>
</div>

Такой ошибки нет, stackblitz.com/edit/реагировать-tc5cgl . Подумайте о том, чтобы предоставить способ воспроизвести проблему.

— 09.02.2019 10:19

html reactjs

09.02.2019 10:14

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

718

Ответы 1

Я не вижу такого же сообщения об ошибке, как в вашем вопросе, но есть синтаксическая ошибка в первом div. Свойство style указано неправильно.

У вас есть style = "background-image: url('images/bg_1.jpg');" который выдает в консоли следующую ошибку:

Invariant Violation: The style prop expects a mapping from style properties to values, not a string. For example, style = {{marginRight: spacing + 'em'}} when using JSX.

Правильный синтаксис для React — style = {{ backgroundImage: "url('images/bg_1.jpg')" }}.

Вы также используете class вместо className, что приводит к следующему предупреждению:

Invalid DOM property class. Did you mean className?

Вот версия вашего кода с правильным синтаксисом React:

<div
  className = "hero-wrap js-fullheight"
  style = {{ backgroundImage: "url('images/bg_1.jpg')" }}
  data-stellar-background-ratio = "0.5"
>
  <div className = "overlay" />
  <div className = "container">
    <div
      className = "row no-gutters slider-text js-fullheight align-items-center justify-content-start"
      data-scrollax-parent = "true"
    >
      <div
        className = "col-xl-10 ftco-animate"
        data-scrollax = " properties: { translateY: '70%' }"
      >
        <h1
          className = "mb-4"
          data-scrollax = "properties: { translateY: '30%', opacity: 1.6 }"
        >
          Get <br />
          <span>your Things Done</span>
        </h1>
        <p
          className = "mb-4"
          data-scrollax = "properties: { translateY: '30%', opacity: 1.6 }"
        >
          Over 10K People across Sri Lanka
          <br />
          <span> are willing to Help you</span>
        </p>
      </div>
    </div>
  </div>
</div>

Edit 747xjz1870