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。我通过将链接调用原始html文件中的css来解决这个问题，以便在webpack之前调用它。

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

1 个答案: