当在React中使用危险地使用SetInnerHTML时，阻止HTML在CSS之前加载

Question

I've got a React app where I need to get my header html from a third party. The third party passes me an object on initialization that looks something like this:

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

I am trying to pass the html into my React app by using dangerouslySetInnerHTML like so:

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

However, my app renders the raw HTML before loading the styles, so I get a short period of time with visible unstyled HTML from the desktopHeader . Is there a way to avoid this? I feel like I am missing something.

Answer 1

In case someone else ever stumbles upon this, I figured out what the problem was here.

The css is providing a link, and the html is just providing markup. So, when dangerouslySetInnerHTML is called, it immediately injects both, but obviously it takes a second for the css to load since the href of the link has to be executed and actually go get the css. I solved this by putting the link to call the css in the raw html file so that it is called before webpack.