如何将React/Next.js组件文件转为文本并完整展示代码

需求明确：当用户点击“展示代码”按钮时，需完整展示目标React/Next.js组件文件的全部内容，包括导入语句、Hook逻辑、组件结构等所有细节。以下是基于示例组件的实现方案：

示例实现代码 #

"use client"
import { useState } from "react"

// 目标组件的完整代码文本
const testComponentCode = `
"use client"

import { useState } from "react"

const Test = () => {
  const [number, setNumber] = useState(1)
  return (
    <div className="flex justify-between bg-red-500 ">
      <span>{number}</span>
      <button
        onClick={() => {
          setNumber(number + 1)
        }}
      >
        increment
      </button>
    </div>
  )
}
export default Test
`

const CodeViewer = () => {
  const [showCode, setShowCode] = useState(false)

  return (
    <div>
      <button onClick={() => setShowCode(!showCode)}>
        {showCode ? '隐藏代码' : '展示代码'}
      </button>
      {showCode && (
        <pre className="bg-gray-100 p-4 rounded-md overflow-auto max-h-96">
          <code>{testComponentCode}</code>
        </pre>
      )}
    </div>
  )
}

export default CodeViewer

核心注意点 #

• 完整获取代码文本：静态组件可直接将代码转成字符串常量；动态场景下，可在服务端通过fs.readFileSync读取组件文件内容，或在构建阶段将代码打包为可访问的字符串资源。
• 保留代码格式：使用<pre>标签包裹<code>标签，确保代码的换行、缩进等格式被完整保留，避免样式错乱。
• 交互逻辑：通过React状态控制代码区域的显示与隐藏，实现点击按钮切换的交互效果。

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