Question

我目前正在通过http从mysql注入一个html字符串，然后将其显示在一个组件中。这有点奇怪，但我的样式不适用于我动态注入的html。但是我的其他css库中有一些类。但我的bulma.css库样式似乎没有被应用。

我目前正在使用dangerouslySetInnerHTML={this.createMarkup()}

html正在浏览器中成功呈现。

以下是我的相关文件

我的React组件文件

import React from 'react';
import {connect} from 'react-redux';
import { fetchPost } from '../actions/index';

class Article extends React.Component {

    componentWillMount(){
        this.props.fetchPost();
    }

    createMarkup() {
        return {__html: this.props.post};
    }

    renderPosts(){

        if(!this.props.post){
            return(
                <img src="/app/img/loading.svg" alt=""/>
            )
        }

        if(this.props.post){
            return(
                  <div dangerouslySetInnerHTML={this.createMarkup()} />
            )
        }

    }

    render(){
        return(
            <div >{this.renderPosts()}</div>
        )
    }
}

function mapStateToProps(state){
    return {
        post: state.posts.post
    }
}

export default connect(mapStateToProps, { fetchPost })(Article);

我的索引HTML文件（使用laravel的刀片文件）

<!DOCTYPE html>
<html lang="{{ config('app.locale') }}">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="/app/css/font-awesome/css/font-awesome.min.css">
        <link rel="stylesheet" href="/app/css/bulma-0.4.1/css/bulma.css">
        <link rel="stylesheet" href="/app/css/prism.css">
        <link rel="stylesheet" href="/app/css/app-style.css?{{str_random(40)}}">
        <title>Development Gems!</title>
    </head>
    <body>

    <div id="root">
    </div>

    <script src="/app/js/plugins/prism.js"></script>
    <script src="/app/js/app.bundle.js?{{str_random(40)}}"></script>
    </body>
</html>

我的HTML字符串

 $data = '<div className="container padded-top-di-20">
                <div className="columns">
                    <div className="column">
                        <p className="title is-1 has-text-centered">How to install Laravel 5 with Xampp (Windows)</p>
                    </div>
                </div>

                <p className="title is-3">
                    Requirements
                </p>

               <div className="content">
                   <ul>
                       <li>Donec blandit a lorem id convallis.</li>
                       <li>Cras gravida arcu at diam gravida gravida.</li>
                       <li>Integer in volutpat libero.</li>
                       <li>Donec a diam tellus.</li>
                       <li>Aenean nec tortor orci.</li>
                       <li>Quisque aliquam cursus urna, non bibendum massa viverra eget.</li>
                       <li>Vivamus maximus ultricies pulvinar.</li>
                   </ul>
               </div>

                <p className="title is-3">
                    Install Xampp
                </p>

                <p>
                    First of all, we need Xampp, so we can download it from the official page:
                </p>

                <a href="https://www.apachefriends.org/index.html">Download Xampp</a>

                <p className="title is-3">
                    Composer
                </p>

                <p>
                    After you\'ve downloaded and installed Xampp, we need to install Composer.
                </p>

                <p>
                    Composer is a PHP package manager that is integrated with Laravel Framework. In Windows we can install it easy going to the official page and download the installer.
                </p>

                <div className="columns">
                    <div className="column">
                        <pre className="command-line language-bash" data-user="Thatguyjono94" data-host="localhost"><code className="language-bash">{`cd \/usr\/local\/etc`}</code></pre>
                    </div>
                </div>
                <div className="columns">
                    <div className="column">
                        <pre className="command-line language-bash" data-user="Thatguyjono94" data-host="localhost"><code className="language-bash">{`cd \/usr\/local\/etc`}</code></pre>
                    </div>
                </div>

                <div className="columns">
                    <div className="column is-half is-offset-one-quarter">
                        <figure className="image is-128x128 margin-auto-di">
                            <img src="/app/img/profiles/avatar_icon-1.png" />
                        </figure>

                        <p className="title is-2 is-spaced has-text-centered">@Thatguyjono94</p>
                        <p className="subtitle is-4 has-text-centered">I\'m a DOPE AF web developer that focuses on building disruptive, fast moving and kick ass web applications.</p>

                        <div className="has-text-centered">
                            <span className="icon is-medium">
                              <i className="fa fa-github" aria-hidden="true"></i>
                            </span>
                            <span className="icon is-medium">
                              <i className="fa fa-facebook-official" aria-hidden="true"></i>
                            </span>
                            <span className="icon is-medium">
                              <i className="fa fa-twitter-square" aria-hidden="true"></i>
                            </span>
                        </div>
                    </div>
                </div>
            </div>';

Answer 1

dangerouslySetInnerHTML需要一个HTML字符串。您提供的字符串格式为JSX字符串，因为它包含className而不是class。要解决此问题，请将className的每个实例转换为class。

React.js动态地将数据库（sql）中的html注入到不应用css样式的组件中？

1 个答案: