我通过fetch在我的React项目中调用一个端点，如下所示。
curl --location 'https：//example.com/some/v1'
--header 'Content-Type：中文（简体）
这给予了我一个这样的回应：（超过5000行，仅显示部分内容）。

<style class="ssr-css">
    .some_class {
        margin: 0 auto
    }

    html,
    body {
        overflow-x: hidden;
        width: 100%;
        height: 100%
    }
    /* 100+ more styles */
</style>
<style class="ssr-css">
    .some_class_1 {
        margin: 0 auto
    }
    /* 600+ more styles */
</style>
<div class="some_class">
    <div style="color: red" class="some_class_1">
        some text
    </div>
    <!-- 1000's more lines -->
</div>

如何将其转换为组件并呈现它？
我不能只使用危险的SetInnerHTML。它可以很好地处理html，但不能处理样式。
我可以考虑像下面这样提取样式并直接注入文档。
感觉有点古怪，担心这会对我页面上的其他样式产生副作用。
无论如何，我可以使用React来实现这一点，而不必直接将样式注入到文档中。更干净的方法。
请指教，谢谢。

import React, { useEffect, useState } from 'react';

const MyComponent = () => {
  const [htmlResponse, setHtmlResponse] = useState('');

  useEffect(() => {
    fetch('https://example.com/some/v1', {
      headers: {
        'Content-Type': 'text/html',
      },
    })
      .then((response) => response.text())
      .then((data) => setHtmlResponse(data))
      .catch((error) => console.error(error));
  }, []);

  useEffect(() => {
    const styleRegex = /<style\b[^>]*>([\s\S]*?)<\/style>/gm;
    const matches = [...htmlResponse.matchAll(styleRegex)];
    const styles = matches.map((match) => match[1]).join('');

    const styleElement = document.createElement('style');
    styleElement.innerHTML = styles;
    document.head.appendChild(styleElement);
  }, [htmlResponse]);

  return (
    <div dangerouslySetInnerHTML={{ __html: htmlResponse }} />
  );
};

export default MyComponent;