如何将 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>    

Answer 1

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

style=“background-image： url（images/img_bg_2.jpg）”;

您必须使用

style={{backgroundImage： 'url（images/img_bg_2.jpg）'}}

您的代码应如下所示：

我正在研究 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编译时，它会抛出以下错误：

错误：prop 需要从样式属性到值（而不是字符串）的映射。例如，使用 JSX 时，style={{marginRight： spacing + 'em'}} 。in li （at homePage.js：13） in ul （at homePage.js：12） in div （at homePage.js：11） in side （at homePage.js：10） in Homepage （由 Context.Consumer 创建）style

无法理解，如何将html代码集成到reactjs路由器dom中，这是问题还是版本不匹配问题。style

版本详情 ：

react": "^16.12.0",

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

请建议。

Answer 2

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

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

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

Answer 3

默认情况下，react（ 又名： 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 4

样式属性在 react js 中编写，如下所示

style={{

      display: 'flex',

      flexDirection: 'row',

      justifyContent: 'space-between',

}}

请注意，我们不能在单词（-）之间使用破折号，等等，值也必须放在单引号或双引号内flex-directionfelxDirection