Question

我收到以下错误消息：

解析错误：JSX内容未终止

这是我的代码：

<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>

Answer 1

我没有看到与您的问题相同的错误消息，但是第一个div中存在语法错误。 style属性未正确指定。

您有style="background-image: url('images/bg_1.jpg');"，它会在控制台中产生以下错误：

不变违规：style道具期望从样式映射属性值，而不是字符串。例如，style = {{marginRight：间距+'em'}}，当使用JSX时。

React的正确语法是style={{ backgroundImage: "url('images/bg_1.jpg')" }}

您还使用class而不是className导致此警告：

无效的DOM属性class。您是说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>

错误-分析错误：未终止的JSX内容

1 个答案: