React组件Demo页面构建咨询：仿Material UI展示效果

几个无需拆分大量文件的可行方案 #

针对你想要制作类似Material-UI风格的组件Demo页面需求，同时避免拆分过多文件，这里有几个实用的方案：

方案1：直接内嵌代码片段字符串

这是最简单直接的方式，你可以在当前组件中定义一个字符串变量，存储要展示的JSX代码片段，然后传递给CodeExample组件渲染。这样既不用拆分文件，也能精准控制展示的代码内容。

修改后的组件代码示例：

import * as React from "react";

// 定义要展示的Demo代码片段，直接写为字符串
const demoCode = `<MyComponent value={this.state.value} onChange={event => this.handleChange(event) } />`;

export default class SimpleExamples extends React.Component<{}, { value: any }> {
  constructor(props: {}) {
    super(props);
    this.state = { value: "" }; // 初始化state，确保value有值
  }

  handleChange(event: React.ChangeEvent<HTMLElement>): void {
    // 实现具体的状态更新逻辑
    this.setState({ value: (event.target as HTMLInputElement).value });
  }

  render() {
    return (
      <div style={{ padding: "2rem" }}>
        {/* 组件介绍 */}
        <h2>MyComponent Demo</h2>
        <p>
          <code>MyComponent</code> 是一款支持受控模式的自定义组件，核心依赖 <code>value</code> 和 <code>onChange</code> 两个props来实现状态控制。
        </p>
        <p>你可以通过<code>value</code>设置组件初始值，通过<code>onChange</code>监听值的变化并同步到父组件状态中。</p>

        {/* Props说明表格 */}
        <h3>Props 详细说明</h3>
        <table style={{ width: "100%", borderCollapse: "collapse", margin: "1rem 0" }}>
          <thead>
            <tr style={{ borderBottom: "1px solid #e0e0e0" }}>
              <th style={{ padding: "0.5rem", textAlign: "left" }}>Prop</th>
              <th style={{ padding: "0.5rem", textAlign: "left" }}>Type</th>
              <th style={{ padding: "0.5rem", textAlign: "left" }}>Default</th>
              <th style={{ padding: "0.5rem", textAlign: "left" }}>Description</th>
            </tr>
          </thead>
          <tbody>
            <tr style={{ borderBottom: "1px solid #e0e0e0" }}>
              <td style={{ padding: "0.5rem" }}><code>value</code></td>
              <td style={{ padding: "0.5rem" }}>any</td>
              <td style={{ padding: "0.5rem" }}>-</td>
              <td style={{ padding: "0.5rem" }}>组件的当前受控值，用于同步组件状态</td>
            </tr>
            <tr>
              <td style={{ padding: "0.5rem" }}><code>onChange</code></td>
              <td style={{ padding: "0.5rem" }}>(event: React.ChangeEvent&lt;HTMLElement&gt;) => void</td>
              <td style={{ padding: "0.5rem" }}>-</td>
              <td style={{ padding: "0.5rem" }}>值变化时触发的回调函数，返回事件对象供父组件处理状态更新</td>
            </tr>
          </tbody>
        </table>

        {/* Demo展示区域 */}
        <h3>Live Demo</h3>
        <div style={{ padding: "1rem", backgroundColor: "#f5f5f5", borderRadius: "4px" }}>
          <MyComponent value={this.state.value} onChange={(event) => this.handleChange(event)} />
        </div>

        {/* 代码示例区域 */}
        <h3>代码示例</h3>
        <div style={{ marginTop: "1rem" }}>
          {/* 把定义好的代码片段传给CodeExample */}
          <CodeExample code={demoCode} />
        </div>
      </div>
    );
  }
}

这种方案的优点是实现成本极低，适合小型Demo或单个组件的展示；缺点是如果代码片段较长，手动维护字符串容易出错。

方案2：用注释标记提取代码片段

如果你的项目使用webpack构建，可以借助自定义loader或者现有工具（比如react-docgen的扩展），通过特殊注释标记来提取指定的代码片段。

具体做法：

• 在组件代码中用特殊注释包裹要展示的Demo代码：

  // DEMO_START
  <MyComponent value={this.state.value} onChange={event => this.handleChange(event) } />
  // DEMO_END
  

• 编写一个简单的webpack loader，读取文件内容时提取// DEMO_START和// DEMO_END之间的代码，然后把这段代码注入到组件中或者作为变量导出。
• 在SimpleExamples组件中接收提取到的代码，传给CodeExample渲染。

这种方案的优点是代码展示内容和实际运行的代码完全一致，避免手动同步；适合大型组件库项目，可批量处理多个组件的Demo。

方案3：用JSX转字符串工具自动生成代码片段

可以使用react-jsx-to-string这类工具，直接把JSX元素转换成字符串，这样你不用手动写代码字符串，能保证展示的代码和实际运行的代码完全一致。

步骤：

1. 安装依赖：npm install react-jsx-to-string --save-dev
2. 在组件中引入并使用：

import * as React from "react";
import jsxToString from "react-jsx-to-string";

export default class SimpleExamples extends React.Component<{}, { value: any }> {
  constructor(props: {}) {
    super(props);
    this.state = { value: "" };
  }

  handleChange(event: React.ChangeEvent<HTMLElement>): void {
    this.setState({ value: (event.target as HTMLInputElement).value });
  }

  render() {
    // 把要展示的JSX转成字符串
    const demoCode = jsxToString(
      <MyComponent value={this.state.value} onChange={(event) => this.handleChange(event)} />
    );

    return (
      <div style={{ padding: "2rem" }}>
        {/* 组件介绍和Props说明部分同方案1 */}
        <h2>MyComponent Demo</h2>
        {/* ... 省略其他内容 ... */}

        {/* 代码示例区域 */}
        <h3>代码示例</h3>
        <div style={{ marginTop: "1rem" }}>
          <CodeExample code={demoCode} />
        </div>
      </div>
    );
  }
}

这种方案的优点是无需手动维护代码字符串，避免拼写错误；缺点是如果JSX中有动态值（比如this.state.value），转换后的字符串会显示实际的当前值而非表达式，你可能需要额外处理（比如用占位符替换动态值）。

内容的提问来源于stack exchange，提问作者Tan Dat