在 React 中使用 dangerouslySetInnerHTML 时防止 html 在 css 之前加载答案

【问题标题】：Prevent html from loading before css when using dangerouslySetInnerHTML in React在 React 中使用 dangerouslySetInnerHTML 时防止 html 在 css 之前加载
【发布时间】：2018-04-23 18:06:03
【问题描述】：

我有一个 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。有没有办法避免这种情况？我觉得我错过了什么。

【问题讨论】：

标签： html css reactjs rendering

【解决方案1】：

万一其他人偶然发现了这一点，我想出了问题所在。

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

【讨论】：