From 6b7ee52a3c3ee1a28f826d47c58949f48ed4d1a7 Mon Sep 17 00:00:00 2001
From: Claude Code <claude@anthropic.com>
Date: Mon, 10 Nov 2025 11:42:47 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8DLiveCode=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6=E6=9C=AA=E5=AE=9A=E4=B9=89=E9=94=99=E8=AF=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## 问题描述
在文档中使用 `<LiveCode>` 组件时出现错误：
```
Expected component \`LiveCode\` to be defined: you likely forgot to import, pass, or provide it.
```

**根本原因**：
`LiveCode` 组件没有在 `src/theme/MDXComponents.js` 中注册，导致Docusaurus无法识别该组件。

## 修复内容

### 1. 添加导入
```javascript
// 修复前
import React, { useState } from 'react';
import { Highlight } from 'prism-react-renderer';

// 修复后
import React, { useState } from 'react';
import { Highlight } from 'prism-react-renderer';
import LiveCodeComponent from '../components/LiveCode';
```

### 2. 添加组件定义
在 `MDXComponents` 对象中添加：
```javascript
// LiveCode组件 - 实时代码编辑器
LiveCode: ({ code, scope = {}, ...props }) => {
  return <LiveCodeComponent code={code} scope={scope} {...props} />;
},
```

## 受影响的页面
- ✅ `useState` - 4个LiveCode示例
- ✅ `useEffect` - 1个LiveCode示例
- ✅ `useContext` - 1个LiveCode示例（新增）
- ✅ `useReducer` - 1个LiveCode示例（新增）
- ✅ `useCallback` - 1个LiveCode示例（新增）

## 验证结果
所有页面HTTP 200正常访问：
- ✅ useState页面：HTTP 200
- ✅ useEffect页面：HTTP 200
- ✅ useContext页面：HTTP 200
- ✅ useReducer页面：HTTP 200
- ✅ useCallback页面：HTTP 200

## 技术说明
Docusaurus的MDX系统需要通过 `src/theme/MDXComponents.js` 文件来注册自定义组件，这样在MDX文档中使用的自定义组件才能被正确识别和渲染。

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 src/theme/MDXComponents.js | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/src/theme/MDXComponents.js b/src/theme/MDXComponents.js
index 63e6cdc..22c6b5b 100644
--- a/src/theme/MDXComponents.js
+++ b/src/theme/MDXComponents.js
@@ -1,5 +1,6 @@
 import React, { useState } from 'react';
 import { Highlight } from 'prism-react-renderer';
+import LiveCodeComponent from '../components/LiveCode';
 
 // 自定义MDX组件映射
 const MDXComponents = {
@@ -399,6 +400,11 @@ const MDXComponents = {
       </Highlight>
     );
   },
+
+  // LiveCode组件 - 实时代码编辑器
+  LiveCode: ({ code, scope = {}, ...props }) => {
+    return <LiveCodeComponent code={code} scope={scope} {...props} />;
+  },
 };
 
 export default MDXComponents;