React中如何获取组件加载完成后的最终渲染HTML而非初始状态？

ReactDOMServer.renderToString() 是同步渲染方法，仅会执行组件的首次渲染逻辑，不会等待 useEffect 内的异步请求完成，也不会处理状态更新后的重渲染流程，所以只能拿到初始的loading状态HTML。另外你当前的组件代码还存在两个问题：

• 渲染判断逻辑里用到了未定义的loading变量，会导致就算接口请求成功也可能一直返回loading
• 组件内直接调用浏览器端location API，如果是在服务端执行渲染会直接报错

根据你的使用场景选择对应方案：

场景1：服务端渲染场景（你用了Next.js相关环境变量，优先选这个） #

把异步请求提前到组件渲染之前完成，拿到数据后通过props传入组件，组件不需要内部维护异步状态，就能直接渲染完整内容：

// Next.js 服务端预取示例（写在组件同文件内）
export async function getServerSideProps(context) {
  const { id } = context.params;
  try {
    const res = await axios.get(`${process.env.NEXT_API}/${id}`, config);
    if (res.status !== 200 || !res.data) {
      return { redirect: { destination: '/500', permanent: false } }
    }
    return { props: { popupData: res.data } }
  } catch (err) {
    return { redirect: { destination: '/500', permanent: false } }
  }
}

// 改造后的组件
function PopupBetaContent(props) {
  return <div>{props.popupData.name}</div>;
}

// 此时调用renderToString就能拿到完整HTML
const fullHtml = ReactDOMServer.renderToString(<PopupBetaContent popupData={预取的接口数据} />)

场景2：客户端获取最终HTML #

如果是在浏览器端运行，不需要用renderToString，给容器加ref监听状态更新后直接取DOM的innerHTML即可：

import { useState, useEffect, useRef } from 'react';

function PopupBetaContent(props) {
  const id = props.id;
  const [popupContent, setPopupContent] = useState(null);
  const containerRef = useRef(null);

  // 状态更新后即可拿到最终HTML
  useEffect(() => {
    if (popupContent && containerRef.current) {
      const finalHtml = containerRef.current.innerHTML;
      // 在这里处理你拿到的最终HTML
      console.log(finalHtml);
    }
  }, [popupContent]);

  useEffect(() => {
    axios
      .get(`${process.env.NEXT_API}/${id}`, config)
      .then(res => {
        if (res.status === 200 && res.data) {
          setPopupContent(res.data);
        } else {
          location.replace('/500');
        }
      })
      .catch(() => location.replace('/500'));
  }, [id]);

  if (popupContent) {
    return <div ref={containerRef}>{popupContent.name}</div>;
  }
  return <>loading....</>;
}

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