React中使用dangerouslySetInnerHTML时避免HTML先于CSS加载

看起来你遇到了典型的**FOUC（无样式内容闪烁）**问题——第三方的头部HTML先被渲染出来，而对应的CSS还没加载完成，导致页面短暂显示无样式的内容。下面给你几个实用的解决方案，按可靠性排序：

方法1：动态加载CSS并在加载完成后渲染HTML #

这是最稳妥的方案，核心思路是先确保CSS加载完成，再渲染依赖它的头部HTML。我们可以通过动态创建<link>标签、监听加载完成事件来实现：

import React, { useState, useEffect, Fragment } from 'react';
import ProductList from './products/ProductList';

const App = (props) => {
  const [isCssReady, setIsCssReady] = useState(false);
  const { headerObj } = props;

  useEffect(() => {
    // 如果没有CSS，直接标记为就绪
    if (!headerObj?.css) {
      setIsCssReady(true);
      return;
    }

    // 从第三方传入的<link>元素中提取href
    const cssUrl = headerObj.css.props.href;
    const styleLink = document.createElement('link');
    
    styleLink.rel = 'stylesheet';
    styleLink.href = cssUrl;

    // CSS加载成功后，允许渲染头部HTML
    styleLink.onload = () => {
      setIsCssReady(true);
    };

    // 处理CSS加载失败的情况，避免头部一直不显示
    styleLink.onerror = () => {
      console.warn('Header CSS failed to load');
      setIsCssReady(true);
    };

    // 将link标签插入到页面head中
    document.head.appendChild(styleLink);

    // 组件卸载时清理动态创建的link标签
    return () => {
      document.head.removeChild(styleLink);
    };
  }, [headerObj]);

  return (
    <Fragment>
      {/* 只有CSS就绪后才渲染头部HTML */}
      {isCssReady && headerObj?.desktopHeaderHtml && (
        <div dangerouslySetInnerHTML={{ __html: headerObj.desktopHeaderHtml }} />
      )}
      <ProductList />
    </Fragment>
  );
};

export default App;

为什么这个方法有效？ #

• 我们手动控制了CSS的加载流程，只有当onload事件触发（CSS加载完成并应用到页面），才会渲染头部HTML，从根源上避免了无样式内容的出现。
• 加入了错误处理，即使CSS加载失败，头部HTML依然会正常渲染，不会阻塞页面。
• 组件卸载时会清理动态创建的link标签，避免内存泄漏。

方法2：将CSS内联到HTML之前（备选方案） #

如果第三方允许你获取CSS的原始内容（而不是仅提供<link>标签），你可以把CSS内联到<style>标签中，直接放在头部HTML的前面：

// 假设你能获取到CSS的文本内容
const inlineCss = `/* 第三方CSS内容 */`;

// 渲染时先输出内联样式，再输出HTML
return (
  <Fragment>
    <style dangerouslySetInnerHTML={{ __html: inlineCss }} />
    <div dangerouslySetInnerHTML={{ __html: headerObj.desktopHeaderHtml }} />
    <ProductList />
  </Fragment>
);

这个方法的优势是不需要等待异步加载，但前提是你能拿到CSS的文本内容——如果第三方只提供<link>的话，方法1会更适用。

额外提示 #

• 尽量避免直接使用第三方传入的<link>元素通过dangerouslySetInnerHTML插入，因为React对这类DOM元素的加载时机没有控制权，很容易出现加载顺序问题。
• 如果第三方的头部HTML本身包含内联样式，那FOUC的概率会低很多，但外部CSS的加载顺序依然需要注意。

内容的提问来源于stack exchange，提问作者Max Millington