如何将 html 与 ReactJS 集成

Question

我正在做 reactjs 项目。

发生了什么

我将以下 reactjs 代码写入 javascript 文件。

import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import ReactBootstrap, { Jumbotron, Container, Row, Col, Column, Image, Button } from 'react-bootstrap';


class Homepage extends Component {
  render() {

    return (
    <aside id="fh5co-hero">
        <div class="flexslider">
            <ul class="slides">
            <li style="background-image: url(../../Assets/images/img_bg_1.jpg);">
                <div class="overlay-gradient"></div>
                <div class="container">
                    <div class="row">
                        <div class="col-md-8 col-md-offset-2 text-center slider-text">
                            <div class="slider-text-inner">
                                <h1>abc</h1>

                                    <p><a class="btn btn-primary btn-lg" href="#">Start Learning Now!</a></p>
                            </div>
                        </div>
                    </div>
                </div>
            </li>
            <li style="background-image: url(images/img_bg_2.jpg);">
                <div class="overlay-gradient"></div>
                <div class="container">
                    <div class="row">
                        <div class="col-md-8 col-md-offset-2 text-center slider-text">
                            <div class="slider-text-inner">
                                <h1>abc</h1>
                                    <p><a class="btn btn-primary btn-lg btn-learn" href="#">Start Learning Now!</a></p>
                            </div>
                        </div>
                    </div>
                </div>
            </li>
            <li style="background-image: url(images/img_bg_3.jpg);">
                <div class="overlay-gradient"></div>
                <div class="container">
                    <div class="row">
                        <div class="col-md-8 col-md-offset-2 text-center slider-text">
                            <div class="slider-text-inner">
                                <h1>abc</h1>
                                    <p><a class="btn btn-primary btn-lg btn-learn" href="#">Start Learning Now!</a></p>
                            </div>
                        </div>
                    </div>
                </div>
            </li>
            </ul>
        </div>
      </aside>


  );
  }
}

export default Homepage;

有什么问题

当我尝试使用 npm start 编译时，它会抛出以下错误：

错误：style 属性需要从样式属性映射到 值，而不是字符串。例如 style={{marginRight: 间距 + 'em'}} 使用 JSX 时。 在 li (在 homePage.js:13) 在 ul (在 homePage.js:12) 在 div 中（在 homePage.js:11） 在一边（在 homePage.js:10） 在首页（由 Context.Consumer 创建）

不明白，如何将html代码集成到reactjs router dom中。这是style 问题还是版本不匹配问题。

版本详情：

react": "^16.12.0",
"react-bootstrap": "^1.0.0-beta.16",

请建议。

Answer 1

ReactJs 使用 JSX 而不是 html (https://reactjs.org/docs/introducing-jsx.html)。有一些区别，例如，您必须使用“className”而不是“class”。而是

style="background-image: url(images/img_bg_2.jpg)";

你必须使用

style={{backgroundImage: 'url(images/img_bg_2.jpg)'}}

您的代码应如下所示：

   <aside id="fh5co-hero">
    <div className="flexslider">
      <ul className="slides">
        <li style={{backgroundImage: 'url(../../Assets/images/img_bg_1.jpg)'}}>
          <div className="overlay-gradient" />
          <div className="container">
            <div className="row">
              <div className="col-md-8 col-md-offset-2 text-center slider-text">
                <div className="slider-text-inner">
                  <h1>abc</h1>
                  <p><a className="btn btn-primary btn-lg" href="#">Start Learning Now!</a></p>
                </div>
              </div>
            </div>
          </div>
        </li>
        <li style={{backgroundImage: 'url(images/img_bg_2.jpg)'}}>
          <div className="overlay-gradient" />
          <div className="container">
            <div className="row">
              <div className="col-md-8 col-md-offset-2 text-center slider-text">
                <div className="slider-text-inner">
                  <h1>abc</h1>
                  <p><a className="btn btn-primary btn-lg btn-learn" href="#">Start Learning Now!</a></p>
                </div>
              </div>
            </div>
          </div>
        </li>
        <li style={{backgroundImage: 'url(images/img_bg_3.jpg)'}}>
          <div className="overlay-gradient" />
          <div className="container">
            <div className="row">
              <div className="col-md-8 col-md-offset-2 text-center slider-text">
                <div className="slider-text-inner">
                  <h1>abc</h1>
                  <p><a className="btn btn-primary btn-lg btn-learn" href="#">Start Learning Now!</a></p>
                </div>
              </div>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </aside>

Answer 2

默认情况下 react( aka: JSX ) 不能像你粘贴的那样有内联样式，你需要将它们转换为 JSS 样式，如下所示：

// for example "background-image: url(images/img_bg_3.jpg);

<li style={{ backgroundImage: 'url(SOME_IMAGE_URL)' }}> ... </li>
<li style={{ backgroundImage: `url(${IMPORTED_IMAGE})` }}> ... </li>

Answer 3

此代码<li style="background-image: url(../../Assets/images/img_bg_1.jpg);">

应该是<li style={{backgroundImage: 'url(../../Assets/images/img_bg_1.jpg)'}}>

React 中的 style 属性需要一个对象，而不是 CSS 字符串。

Answer 4

样式属性在react js中的写法如下

style={{
      display: 'flex',
      flexDirection: 'row',
      justifyContent: 'space-between',
}}

请注意，我们不能在单词之间使用破折号 (-) flex-direction 变成 felxDirection 等等 值也必须放在单引号或双引号内