如何获取React组件子元素的源码字符串而非渲染结果？

解决方案 #

1. 直接使用字符串模板（简单但需重复维护） #

把要展示的JSX结构写成字符串，直接在<pre>中渲染。缺点是组件结构修改时，要同时改渲染的组件和字符串模板，容易出现不一致。

const MyComponent = () => <h1>Hello</h1>;

// 直接定义要展示的代码字符串
const demoCode = `
<div>
  <MyComponent />
  <MyComponent />
  <MyComponent />
</div>
`;

const Output = () => {
  return (
    <pre>{demoCode}</pre>
  );
};

2. 用Babel工具解析生成JSX字符串（灵活可控） #

借助Babel的解析和生成能力，把JSX代码转换成格式化后的字符串，适合需要动态生成代码的场景。

先安装依赖：

npm install @babel/parser @babel/generator @babel/types

然后编写代码：

import parser from '@babel/parser';
import generate from '@babel/generator';
const MyComponent = () => <h1>Hello</h1>;

// 定义JSX代码字符串
const jsxCode = `
<div>
  <MyComponent />
  <MyComponent />
  <MyComponent />
</div>
`;

// 解析JSX生成AST
const ast = parser.parse(jsxCode, { plugins: ['jsx'] });
// 生成格式化后的代码字符串
const formattedCode = generate(ast, {
  compact: false,
  indent: { style: '  ' }
}).code;

const Output = () => {
  return <pre>{formattedCode}</pre>;
};

3. 使用第三方库快速转换（推荐，减少重复代码） #

用react-element-to-jsx-string库直接把React元素转换成JSX字符串，不用手动维护代码模板，组件结构变更时自动同步展示内容。

安装依赖：

npm install react-element-to-jsx-string

代码示例：

import reactElementToJSXString from 'react-element-to-jsx-string';

const MyComponent = () => <h1>Hello</h1>;

// 定义实际渲染的组件树
const componentTree = (
  <div>
    <MyComponent />
    <MyComponent />
    <MyComponent />
  </div>
);

const Output = () => {
  // 直接把组件树转成JSX字符串展示
  return <pre>{reactElementToJSXString(componentTree)}</pre>;
};

开源网站组件代码展示实现案例 #

• Ant Design官网：采用MDX格式编写组件示例，将组件代码和渲染逻辑放在同一个文件中。构建时通过MDX解析器，既渲染出组件效果，又提取代码块进行格式化和高亮展示，同时支持代码复制功能。

• Material-UI官网：同样基于MDX实现示例展示，配合Prism.js做代码语法高亮。示例代码与组件渲染共享同一逻辑，避免重复编写，还支持切换不同框架（如TypeScript/JavaScript）的代码展示。

• Chakra UI官网：使用MDX组织示例内容，每个示例文件中同时包含可渲染的组件和对应的代码块。通过自定义MDX插件提取代码，结合代码高亮库美化展示，实现代码与组件效果的同步更新。

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