有没有办法从代码本身获取React组件的JSX/TSX？

Question

我正在编写一个页面来说明如何使用我开发的组件，并且我想使用生成示例的 TSX 源代码构建示例对（渲染），理想情况下不必重复代码两次。我希望能够获取渲染组件的引用并从中获取 TSX 代码，然后将其注入到

<pre>

元素中并应用突出显示。然而，我似乎能做的最好的事情就是获取

ìnnerHTML

，它返回 DOM 中渲染的组件，而不是 TSX 代码。有办法实现这一点吗？或者更好的是，一个已经这样做的图书馆？

Answer 1

不，不可能从代码本身获取 React 组件的 JSX/TSX。这是因为 JSX/TSX 是 JavaScript 的语法扩展，它不是 JavaScript 运行时的一部分。当您的代码被转译时，JSX/TSX 语法将转换为创建 React 元素的 JavaScript 代码。原始 JSX/TSX 代码不会保留在转译输出中。