如何获取包含JSX的React组件的原始代码字符串？

根本原因 #

JSX不属于JavaScript原生语法，代码在运行前会被Babel、SWC等编译工具转译为标准JS代码（也就是你看到的jsxDEV/jsx runtime调用格式），运行时实际存在的函数已经是转译后的版本，所以直接调用toString()无法得到原始带JSX的代码。普通函数没有用到需要转译的特殊语法，编译前后结构一致，所以toString()可以正常返回原始内容。

可用解决方案 #

方案1：自定义编译插件（最稳定，适合生产场景） #

通过自定义Babel/SWC插件在编译阶段收集组件的原始源码，挂载到组件的静态属性上：

• 编译阶段遍历所有React组件定义节点，读取节点对应的原始源码字符串
• 自动给组件添加静态属性存储源码，示例转译后的结果如下：

const Component = () => <div>Hello</div>
Component.rawSource = "() => <div>Hello</div>"

运行时直接访问Component.rawSource即可拿到原始代码。

方案2：开发环境基于SourceMap解析 #

仅适用于开发环境：转译后的开发版本代码自带文件路径、行列号信息，你可以引入source-map解析工具，根据转译后代码的位置信息映射回原始源码文件，截取对应位置的代码片段。该方案性能较差，不建议在生产环境使用。

方案3：手动维护源码（适合小范围临时使用） #

如果只是小范围测试使用，可以手动把组件源码存在模板字符串里，再生成组件：

const componentSource = `() => <div>Hello</div>`
const Component = eval(componentSource)
console.log(componentSource) // 直接读取预存的源码字符串即可

注意该方案存在安全风险，不要用于包含不可信输入的业务场景。

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