反应-有什么办法可以忽略嵌入式<style>标签吗？

Question

在我的react项目中，我收到了来自其他API作为HTML文档的响应。

在某些情况下，有一些嵌入样式的css会作为响应，这将覆盖我的项目CSS。

基本上，我想忽略那些嵌入样式。任何帮助将不胜感激。

已解决：-检查以下解决方案（使用正则表达式）

Answer 1

所以为什么不使用正则表达式并在两者之间切掉所有内容 <style> CSS from response </style> ？ 然后将其替换为空字符串“”。

这里是一个正则表达式 const regex = /<style>((.|\s)*?)<\/style>/gim;

<div dangerouslySetInnerHTML={{ __html: itemsToRender.replace(regex, '') }} />

Answer 2

这是一个简单的函数，可删除节点中嵌入的<style>个元素：

const removeStyle = node => [...node.querySelectorAll('style')].forEach(sheet => sheet.parentNode.removeChild(sheet));

现在，您需要在API响应中包含html的节点上调用此函数，该节点可能使用dangerouslySetInnerHtml进行设置。要到达那里，您需要 ref到节点，然后在HTML更改后将其传递给样式清除功能。

Demo on jsfiddle

class Wrapper extends React.Component {
  constructor(props) {
    super(props);
    this._node = React.createRef();  // create the ref to assign to in render()
    this.state = {
      content: ""
    }
  }
  componentDidMount() {
    // simulate API call
    setTimeout(() =>
      this.setState({
        content: html
      }), 200);
  }
  componentDidUpdate(prevProps, prevState) {
     // call removeStyle on the node if this.state.content has been udated
     prevState.content !== this.state.content && removeStyle(this._node.current);
  }

  render() {
    return <div>
      <div ref = { this._node }
           dangerouslySetInnerHTML = {{ __html: this.state.content }}
    /> 
    </div>

  }
}