Question

我知道这根本不是一个好习惯，但这是针对这种情况的最佳解决方案。我收到了服务器的回复，如下所示：

我正在尝试在 head 标记中附加：

 让styleEl = new DOMParser（）。parseFromString（res.data.html，“ text / xml”）;
 styleEl.type =“ text / css”;
 //删除当前样式
 document.getElementById（'styles'）。remove（）;
 document.getElementsByTagName（'head'）[0] .appendChild（styleEl.documentElement）;

我看到新样式已添加到head标签，但是问题在于样式没有应用，而是从元素中删除。我正在使用 React 。

//编辑

如果我通过Web控制台在新创建的样式标签中手动添加样式，则该样式也不适用。

Answer 1

这里有一个图书馆可以这样做：https://www.npmjs.com/package/react-style-tag

这是您如何使用它：

import React, { Component } from "react"; 
import { Style } from "react-style-tag";

class App extends Component {
  constructor(props) {
     super(props);
     this.state = { styleTag: false };
     fetchStyleTag().then(styleTag => {
        this.setState({ styleTag });
     });
  }
  render() {
    const { styleTag } = this.state;
    return styleTag && <Style>{ styleTag }</Style>;
  }
}

获取响应<style>标签，并使用React将其附加到头部HTML部分

1 个答案: