React.jsは、データベース（sql）からCSSスタイルを適用しないコンポーネントにhtmlを動的に挿入しますか？

Question

私は現在、httpを介してmysqlからhtml文字列を注入し、それをコンポーネントに表示しています。奇妙なことですが、私のスタイリングは動的に注入されたhtmlには適用されません。しかし、私の他のCSSライブラリからはいくつかのクラスがあります。しかし、私のbulma.cssライブラリスタイリングは適用されていないようです。

私は現在、HTMLが正常にブラウザに表示されている、dangerouslySetInnerHTML={this.createMarkup()}

を使用しています。ここで

は私の関連するファイル

私は

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を使用してブレードファイル）

コンポーネントファイルを反応します

私の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文字列を期待しています。指定した文字列は、classの代わりにclassNameが含まれているため、JSX文字列として書式設定されています。これを修正するには、classNameの各インスタンスをclassに変換します。