javascript - 在 React 中注入(inject)动态 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

有可能让它工作，但你需要使用通常的 HTML class 属性而不是 className。我在这里使用了 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>