如何将带有动态状态的React组件转换为HTML？

我想把React组件转换成HTML传给PDF生成器，但网上的教程都没覆盖组件内数据是动态的场景。

我尝试的代码如下：

//createHtml.js

//imports omitted
export function someOtherComponent(){

function createHtml(){
 return renderToStaticMarkup(
          <dataProvider>  
 // 无效：创建了无mydata的新dataProvider实例
            <myComponent />
          </dataProvider>
        )
}
return (    <someButton onclick=createHtml>   )
}

这段代码没法正常显示内容，因为新创建的dataProvider实例没有原有的mydata，原数据只存在于初始的Provider实例里。我不想删掉现有组件改用原生JS生成HTML字符串，求解决方案。

附相关组件伪代码：

//myComponent.js

import {getData} from 'dataProvider'
export function myComponent(props) {
    const { mydata } = getData();
    // 仅展示动态数据
    return (    <div>    {mydata}    </div>    )
}

//dataProvider.js
const dataContext = createContext();

export default function datatProvider({ children }) {
  const [mydata, setData] = useState([]);
  const { Provider } = dataContext;
  return <Provider value={mydata}>{children}</Provider>;
}
export function getData() {
  return useContext(dataContext);
}

//startup.js
import {getData} from 'dataProvider'
function startup(){
     const { setData } = getData();
     // 从数据库加载数据
     setData(res.data);
    
}

（为简洁起见，已省略React相关导入）

核心思路是复用当前Provider中的动态数据，而非创建新的Provider实例，以下是两种可行方案：

方案一：获取当前上下文数据，手动注入到静态渲染的Provider中 #

首先修正dataProvider.js的逻辑错误：原代码中Context仅传递了mydata，但startup.js试图解构setData，会导致报错。先把Context值改成包含数据和修改方法的对象：

//dataProvider.js
const dataContext = createContext();

export default function DataProvider({ children }) {
  const [mydata, setData] = useState([]);
  // 传递包含数据和修改方法的对象
  return <dataContext.Provider value={{ mydata, setData }}>{children}</dataContext.Provider>;
}
export function getData() {
  return useContext(dataContext);
}

然后修改createHtml.js，在组件内部获取当前上下文的mydata，并手动注入到静态渲染的Provider中：

//createHtml.js
import { getData } from 'dataProvider';
import { dataContext } from 'dataProvider';
import MyComponent from './myComponent';
import { renderToStaticMarkup } from 'react-dom/server';

export function SomeOtherComponent(){
  const { mydata } = getData(); // 拿到当前上下文的动态数据

  function createHtml(){
    return renderToStaticMarkup(
      // 直接用Context.Provider传入已有数据，避免创建新的Provider实例
      <dataContext.Provider value={{ mydata }}>
        <MyComponent />
      </dataContext.Provider>
    )
  }

  return <button onClick={createHtml}>生成HTML</button>
}

方案二：将动态数据提升为组件props #

如果组件结构允许，可把mydata提升到当前组件层级，直接作为props传给MyComponent，绕开Context依赖：

// 修改createHtml.js
export function SomeOtherComponent(){
  const { mydata } = getData();

  function createHtml(){
    return renderToStaticMarkup(
      <MyComponent mydata={mydata} />
    )
  }

  return <button onClick={createHtml}>生成HTML</button>
}

// 修改myComponent.js，支持props传参
export function MyComponent({ mydata }) {
  // 优先使用props数据，无props时再从Context取
  const contextData = getData();
  const displayData = mydata || contextData.mydata;
  return <div>{displayData}</div>
}

关键注意事项 #

• renderToStaticMarkup仅生成静态HTML，不会保留React客户端交互逻辑，确保组件所有动态内容已在渲染前准备完毕。
• 若组件包含CSS样式，需将样式注入到生成的HTML中（可使用styled-components的ServerStyleSheet或emotion的服务端渲染API处理），否则PDF生成器可能无法渲染样式。

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