React中如何展示含<style>的非字符串text/html响应片段

要完整展示包含<style>标签的HTML内容，核心是把样式从HTML中分离出来单独注入，再渲染剩余的HTML结构，无需额外依赖库，具体实现如下：

1. 分离样式与HTML内容 #

先写一个工具函数，从返回的HTML字符串里提取所有<style>内的样式代码，同时剥离原HTML中的<style>标签：

function splitStyleAndHtml(htmlContent, containerClass) {
  const styleRegex = /<style[^>]*>([\s\S]*?)<\/style>/gi;
  let styles = '';
  const cleanedHtml = htmlContent.replace(styleRegex, (match, styleContent) => {
    // 可选：给所有样式选择器添加容器类前缀，实现样式隔离
    if (containerClass) {
      styles += styleContent.replace(/([\s{,])/g, `$1.${containerClass} `);
    } else {
      styles += styleContent;
    }
    return '';
  });
  return { styles, cleanedHtml };
}

2. 实现渲染组件 #

用React的useEffect处理接口返回的HTML，分离样式后通过内联<style>标签注入样式，再用dangerouslySetInnerHTML渲染HTML结构：

import { useEffect, useState } from 'react';

function HtmlRenderer({ rawHtml }) {
  const [renderData, setRenderData] = useState({ styles: '', cleanedHtml: '' });
  // 定义容器类名用于样式隔离（可选）
  const containerClass = 'external-html-container';

  useEffect(() => {
    if (rawHtml) {
      const processedData = splitStyleAndHtml(rawHtml, containerClass);
      setRenderData(processedData);
    }
  }, [rawHtml]);

  return (
    <>
      {/* 注入提取到的样式 */}
      <style dangerouslySetInnerHTML={{ __html: renderData.styles }} />
      {/* 渲染处理后的HTML，容器类确保样式仅作用于当前内容 */}
      <div className={containerClass} dangerouslySetInnerHTML={{ __html: renderData.cleanedHtml }} />
    </>
  );
}

3. 使用组件 #

在获取接口数据后，直接传入组件即可：

function App() {
  const [htmlContent, setHtmlContent] = useState('');

  useEffect(() => {
    // 调用REST接口获取text/html内容
    fetch('/your-api-endpoint')
      .then(res => res.text())
      .then(data => setHtmlContent(data));
  }, []);

  return <HtmlRenderer rawHtml={htmlContent} />;
}

关键注意事项 #

• XSS风险：dangerouslySetInnerHTML会直接渲染HTML内容，必须确保接口返回的内容是可信的，避免注入恶意脚本。
• 样式冲突：如果不希望接口样式污染全局样式，一定要启用容器类前缀的处理逻辑，避免和项目原有样式冲突。
• 正则兼容性：上述正则能处理大部分常规<style>标签，若遇到带特殊属性的<style>（如<style scoped>），可根据实际情况调整正则表达式。

内容的提问来源于stack exchange，提问作者kang