在React中动态加载的CSS无法间歇工作

Question

I've made a "pluggable" system in React, which dynamically runs tiny "apps" which consist of an HTML, JS and CSS file. The HTML and CSS files are optional. They intercommunicate through the window object.

I'm dynamically loading the three files here, but I'm having the problem that my CSS classes fail to work 1/5 of the time. They don't even seem to get parsed since I cannot manually apply them in Chrome devtools either.

I've tried using both link and style tags to load the CSS, but both have the same problem. Even a 1000ms setTimeout between the CSS and HTML injection doesn't help. CSS parsing consistently fails roughly every third time the component mounts..

I've tried Chrome, Firefox, and Safari. Same problem in all three.

I'm kind of stuck, I'd love to get some feedback on this..

Here is a video of the issue: (the "app" here is a simple SVG file viewer) http://www.giphy.com/gifs/dvHjBBolgA1xAdyRsv

  const windowInitialized = useElementBlockInitialization({
    id: elementBlockID,
    payload: payload,
    onResult: onResult
  });
  const [styleAndHTMLInitialized, setStyleAndHTMLInitialized] = useState(false);

  // after some properties are set in Window, run this effect
  useEffect(() => {
    let gettingStyleAndHTML = false;
    if (windowInitialized) {
      gettingStyleAndHTML = true;
      getStyleAndHTML().then(({ styleBody, htmlBody }) => { // async function that fetches some html and css as a string (both potentially null)
        if (gettingStyleAndHTML) {
          if (styleBody) {
            const styleElement = document.createElement('style');
            styleElement.type = 'text/css';
            styleElement.appendChild(document.createTextNode(styleBody));
            document.head.appendChild(styleElement);
          }
          if (htmlBody) {
            // containerElement is a ref
            containerElement.current.innerHTML = htmlBody;
          }
          setStyleAndHTMLInitialized(true);
        }
      });
    }
    return () => {
      gettingStyleAndHTML = false;
    };
  }, [windowInitialized]);

  // after the CSS and HTML is injected, run this hook
  useEffect(() => {
    if (styleAndHTMLInitialized) {
      const scriptElement = document.createElement('script');
      scriptElement.setAttribute('data-eb-container-id', containerElementID);
      scriptElement.setAttribute('data-eb-id', elementBlockID);
      scriptElement.setAttribute('src', makeElementBlockBaseURL() + '.js');
      document.head!.appendChild(scriptElement);

      return () => {
        scriptElement.remove();
      };
    }
    return;
  }, [styleAndHTMLInitialized]);

  // only render the container once the window properties are set
  return windowInitialized ? (
    <Container ref={containerElement} id={containerElementID} />
  ) : null;

Answer 1

I figured it out.

My automatically generated class names occasionally started with a number. CSS class names can not apparently start with a number!

Do'h.