React 18/Next 13：客户端与服务端将Children转为字符串方案

一、获取组件的标签形式（如<ExampleChildComponent />） #

如果需要得到组件的声明式字符串（而非渲染后的HTML），可以直接解析React元素的type和props来构建：

function getComponentTagString(child: React.ReactElement) {
  // 优先取组件的displayName，没有则用函数名
  const componentName = child.type.displayName || (child.type as Function).name;
  // 简单序列化props（复杂场景可替换为更完善的序列化逻辑）
  const propsStr = Object.keys(child.props).length > 0 
    ? ` ${Object.entries(child.props).map(([key, val]) => `${key}={${JSON.stringify(val)}}`).join(' ')}`
    : '';
  return `<${componentName}${propsStr} />`;
}

// 在你的LogChild组件中使用
function LogChild({ children }: { children: React.ReactElement }) {
  // 假设传入单个组件元素，多元素场景可遍历React.Children处理
  const componentTag = getComponentTagString(children);
  console.log(componentTag); // 输出: <ExampleChildComponent />
  
  return <p>Logged!</p>;
}

二、获取渲染后的HTML字符串 #

针对官方示例报错的问题，只需确保每次渲染后卸载临时Root，避免DOM节点冲突，以下是React 18客户端组件的可行实现：

import { createRoot } from 'react-dom/client';
import { flushSync } from 'react-dom';

function renderChildrenToHtml(children: React.ReactNode): string {
  const div = document.createElement('div');
  const root = createRoot(div);
  
  try {
    flushSync(() => {
      root.render(children);
    });
    return div.innerHTML;
  } finally {
    // 卸载临时Root，避免内存泄漏和后续DOM冲突
    root.unmount();
  }
}

// 在你的LogChild组件中使用
function LogChild({ children }: { children: React.ReactNode }) {
  const htmlString = renderChildrenToHtml(children);
  console.log(htmlString); 
  // 输出: <div class="bg-green-500 w-20 h-20">Hello I am a green box<button class="bg-blue-100 px-6 py-3">I am a button</button></div>
  
  return <p>Logged!</p>;
}

Next 13 服务端组件（Server Components）中的实现 #

在Next 13 App Router的服务端组件中，可直接使用官方服务端渲染API，无客户端DOM限制：

import { renderToString } from 'react-dom/server';

function LogChild({ children }: { children: React.ReactNode }) {
  const htmlString = renderToString(children);
  console.log(htmlString);
  return <p>Logged!</p>;
}

三、注意事项 #

• 客户端渲染HTML字符串时，若组件包含状态更新或副作用，需确保这些逻辑不会影响主应用（临时DOM环境独立于主应用）
• 多children场景需通过React.Children.forEach遍历处理每个子元素
• 服务端使用renderToString是官方允许的，仅客户端场景不建议使用该API

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