如何将 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 {&nbsp; render() {&nbsp; &nbsp; return (&nbsp; &nbsp; <aside id="fh5co-hero">&nbsp; &nbsp; &nbsp; &nbsp; <div class="flexslider">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <ul class="slides">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li style="background-image: url(../../Assets/images/img_bg_1.jpg);">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="overlay-gradient"></div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="container">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="row">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="col-md-8 col-md-offset-2 text-center slider-text">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="slider-text-inner">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h1>abc</h1>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <p><a class="btn btn-primary btn-lg" href="#">Start Learning Now!</a></p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li style="background-image: url(images/img_bg_2.jpg);">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="overlay-gradient"></div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="container">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="row">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="col-md-8 col-md-offset-2 text-center slider-text">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="slider-text-inner">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h1>abc</h1>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <p><a class="btn btn-primary btn-lg btn-learn" href="#">Start Learning Now!</a></p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li style="background-image: url(images/img_bg_3.jpg);">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="overlay-gradient"></div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="container">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="row">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="col-md-8 col-md-offset-2 text-center slider-text">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="slider-text-inner">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h1>abc</h1>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <p><a class="btn btn-primary btn-lg btn-learn" href="#">Start Learning Now!</a></p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </ul>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; </aside>&nbsp; );&nbsp; }}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={{&nbsp; &nbsp; &nbsp; display: 'flex',&nbsp; &nbsp; &nbsp; flexDirection: 'row',&nbsp; &nbsp; &nbsp; justifyContent: 'space-between',}}请注意，我们不能在单词（-）之间使用破折号，等等，值也必须放在单引号或双引号内flex-directionfelxDirection