如何在React应用中将组件代码以纯文本形式渲染到文档页面中

以下是几种可直接落地的实现方式：

方法1：直接包裹为字符串（无依赖、最简便） #

直接把需要展示的代码片段用模板字符串包裹后放在{}内，React会直接渲染字符串内容，不会将其解析为JSX组件执行。
示例代码：

import Input from "../components/input";
function DocumentationPage () {
  // 示例变量可自行按业务逻辑定义
  const value = ''
  const onChange = (e) => console.log(e)
  return (<div>
    Input:
    usage:
    <code>
      {`<Input type='login' label={'Login'} value={value} onChange={onChange}></Input>`}
    </code>
    <Input type='login' label={'Login'}></Input>
  </div>)
}

方法2：手动转义特殊字符 #

适合仅需要展示少量代码片段的场景，手动转义JSX特殊字符即可避免被解析：

• < 转义为 <
• > 转义为 >
• { 转义为 {
• } 转义为 }
  示例代码：

<code>
  &lt;Input type='login' label=&#123;'Login'&#125; value=&#123;value&#125; onChange=&#123;onChange&#125;&gt;&lt;/Input&gt;
</code>

方法3：使用语法高亮库（适合正式文档项目） #

如果需要代码高亮、行号、格式化等专业文档能力，可以引入语法高亮库处理，无需手动转义：
示例代码：

import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter'
import { darcula } from 'react-syntax-highlighter/dist/esm/styles/prism'
import Input from "../components/input";

function DocumentationPage () {
  // 直接把要展示的代码存为字符串即可
  const inputUsageCode = `<Input type='login' label={'Login'} value={value} onChange={onChange}></Input>`
  return (<div>
    Input:
    usage:
    <SyntaxHighlighter language="jsx" style={darcula}>
      {inputUsageCode}
    </SyntaxHighlighter>
    <Input type='login' label={'Login'}></Input>
  </div>)
}

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