如何将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路由器dom中。这是style问题还是版本不匹配问题。

版本详细信息：

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

请提出建议。

Answer 1

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

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

React中的style props和对象而不是CSS字符串。

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

您不应该在html标签中使用样式。使用外部CSS文件。不推荐。

Answer 4

ReactJs使用JSX而不是html（https://reactjs.org/docs/introducing-jsx.html）。有一些区别，例如，必须使用“ classname”代替“ class”。您的代码应如下所示：

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

样式属性按如下方式在react js中编写

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

请注意，我们不能在单词（-）之间使用破折号flex-direction变为felxDirection，依此类推值也必须放在单引号或双引号内