怎样把 react 组件函数转为字符串？

Question

有这样一个组件函数：

function Component() {
    const content = 123 + 456
    return <div>{content}</div>
}

我要把整个函数原样转为字符串

app.jsx

function App() {
    const str = Component.toString()
    console.log(str)
    return (
        <div>{str}</div>
    )
}

打印出来的却是这样：

function Component() {
    const content = 123 + 456;
    return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
        children: content
    }); }

贴个CodeSandbox链接

Answer 1

在 JS 的眼里，组件确实就是长这个样子的，所谓“原样”其实是 JSX 的语法。
如果你想直接获得 JSX 的字符串，你可以：

1. 把它放到静态文件夹，然后用 Ajax 获取，这样就能够在 JS 里获得代码原文。

   如果你在一个 JSX 文件里写了多个组件，还需要考虑把组件分离出来，这需要相当高超的编程技术。
   不过也有简单的方案，例如自己在文件里做标记：

   // __COMP_START__
   function Component() {
    const content = 123 + 456
    return <div>{content}</div>
   }
   // __COMP_END__

   这样只需要一个正则表达式就可以切分了。

2. 自己写 Babel 插件，在编译组件的时候顺便把组件的原文附上，例如附着在.sourceCode 属性上，那么就可以这样获取：

    const str = Component.sourceCode;

   这个方案比方案一要困难一些。

这两种方案都是基于你可以直接接触项目源代码这个前提，如果是别人的项目的话你得把 JS 函数反编译为 JSX。

Answer 2

1. 将 Component 移动到单独文件，例如 Component.jsx。
2. 通过 node 读取文件

const fs = require('fs')

fs.readFile('Component.jsx', 'utf8' , (err, data) => {
  if (err) {
    console.error(err)
    return
  }
  console.log(data)
})