在 React 中注入动态 HTML - CSS 不起作用

Question

从 API 获取动态 HTML，HTML 加载正常，但CSS不适用于此新 HTML。

你我需要重新加载CSS。

import React, { Component } from "react";
import Utility from "../common/Utility";

class Template extends Component {
  constructor(props) {
  super(props);
  this.token = localStorage.getItem("token");
  this.client_id = localStorage.getItem("client_id");
 }

 componentDidMount() {
   //fetching dynamic html
   Utility.ExecuteData("template", this.token, {
    client_id: this.client_id
   }).then(result => {
      var dynamic_html = document.getElementById("dynamic_html");
      dynamic_html.innerHTML = result.data[0].template;
     });
 }

 render() {
  return (
   <React.Fragment>
    <div id="dynamic_html" />
   </React.Fragment>
  );
 }
}

export default Template;

Answer 1

有可能让它工作，但className你需要使用通常的 HTMLclass属性来代替。我在dangerouslySetInnerHTML这里使用过，但是如果您innerHTML像在问题中那样设置元素的 ，结果是一样的。

function Template({ html }) {
  return (
    <div dangerouslySetInnerHTML={{__html: html}} />
  );
}

const html = '<div class="heading">With style</div>';

ReactDOM.render(
  <Template html={html} />,
  document.getElementById('container')
);

.heading {
  font-size: 2em;
  color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="container"></div>