如何从导入的React组件中获取对应的JSX代码？

你现在需要在组件库文档里，把渲染后的Button组件转换成对应的底层JSX代码展示，目前用读取纯文本的方式不够高效，这里提供两种更优的方案：

方案一：利用React官方的renderToString转义生成 #

直接用React DOM提供的renderToString方法把组件转换成HTML字符串，再转义特殊字符，就能得到可展示的JSX代码：

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

const Docs = (props) => {
  const renderedButton = <Button icon='home'>Hello</Button>;

  // 自定义函数：把组件转成转义后的JSX字符串
  const getEscapedRenderedJSX = (component) => {
    const htmlStr = renderToString(component);
    // 转义HTML特殊字符，确保在<code>标签里正确显示
    return htmlStr
      .replace(/&/g, '&amp;')
      .replace(/</g, '&lt;')
      .replace(/>/g, '&gt;')
      .replace(/"/g, '&quot;')
      .replace(/'/g, '&#039;');
  };

  const buttonJSX = getEscapedRenderedJSX(renderedButton);

  return (
    <div>
      {renderedButton}
      <code>{buttonJSX}</code>
    </div>
  );
};

优缺点 #

• 优势：不用额外依赖，直接用React官方API，实现简单
• 局限：如果组件包含依赖客户端DOM的逻辑（比如useEffect里的操作），renderToString是服务端渲染逻辑，可能无法完全复现客户端渲染的最终结果，但对于纯UI展示类组件完全够用

方案二：维护组件模板元数据，动态生成JSX #

在组件定义时导出它的JSX模板字符串，然后根据传入的props动态替换变量，生成对应的代码：

首先修改Button.jsx，导出模板：

export const Button = (props) => (
  <button {...props}><Icon name={props.icon}/>{props.children}</button>
);

// 导出组件的JSX模板，方便文档里复用
Button.jsxTemplate = `<button {...props}><Icon name={props.icon}/>{props.children}</button>`;

然后在文档组件里生成代码：

import { Button } from 'components/Button';

const Docs = (props) => {
  const buttonProps = { icon: 'home' };
  const buttonChildren = 'Hello';
  const renderedButton = <Button {...buttonProps}>{buttonChildren}</Button>;

  // 根据模板和传入的props生成转义后的JSX
  const generateJSXFromTemplate = (template, props, children) => {
    let jsxCode = template;
    // 替换模板里的props变量
    Object.entries(props).forEach(([key, value]) => {
      jsxCode = jsxCode.replace(new RegExp(`{props.${key}}`, 'g'), JSON.stringify(value));
    });
    // 替换children
    jsxCode = jsxCode.replace('{props.children}', children);
    // 转义特殊字符
    return jsxCode
      .replace(/&/g, '&amp;')
      .replace(/</g, '&lt;')
      .replace(/>/g, '&gt;')
      .replace(/"/g, '&quot;');
  };

  const buttonJSX = generateJSXFromTemplate(Button.jsxTemplate, buttonProps, buttonChildren);

  return (
    <div>
      {renderedButton}
      <code>{buttonJSX}</code>
    </div>
  );
};

优缺点 #

• 优势：能精确控制展示的JSX代码，不会因为渲染逻辑差异出现不一致的情况
• 局限：需要手动维护组件的模板字符串，组件更新时要同步更新模板，适合结构稳定的组件

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