防止 html 在 CSS 之前加载，在 React 中使用危险的 SetInnerHTML

Question

我有一个React应用程序，我需要从第三方获取我的标题html。第三方在初始化时向我传递了一个对象，如下所示：

headerObj: { desktopHeaderHtml: <div>...</div>, css: <link href="www.sweetcss.com"></link }

我正在尝试使用如下dangerouslySetInnerHTML将 html 传递到我的 React 应用程序中：

import React, { Fragment } from 'react'
import ProductList from './products/ProductList'
const App = (props) => {
const desktopHeader = {__html: `${props.navigation.css}${props.navigation.desktopHeaderHtml}`}
return (
<Fragment>
<div dangerouslySetInnerHTML={ desktopHeader } />
<ProductList />
</Fragment>
)
}
export default App

但是，我的应用程序在加载样式之前呈现原始 HTML，因此我从desktopHeader中获得一小段时间的可见无样式 HTML。有没有办法避免这种情况？我觉得我错过了什么。

Answer 1

万一其他人偶然发现了这一点，我弄清楚了这里的问题所在。

css 提供了一个链接，而 html 只是提供标记。因此，当调用dangerouslySetInnerHTML时，它会立即注入两者，但显然加载 css 需要一秒钟，因为必须执行链接的 href 并实际获取 css。我通过将调用 css 的链接放在原始 html 文件中来解决这个问题，以便在 webpack 之前调用它。