mdx-components.tsx

基本信息

• 类型: MDX 组件配置模块
• 路径: ./mdx-components.tsx

功能描述

该文件是 Next.js MDX 的组件配置文件，用于自定义 MDX 渲染时使用的组件。它定义了书籍组件和儿童模式组件的映射关系，使得在 MDX 文件中可以使用这些自定义组件来渲染交互式内容。

导出内容

• useMDXComponents - 主要函数，接收默认组件并返回扩展后的组件映射

依赖导入

• mdx/types - MDX 类型定义
• react - React 组件类型
• @/components/book/interactive - 书籍交互组件（50+ 个组件）
• @/components/kids/elements - 儿童模式元素组件（13 个组件）

主要组件映射

表格组件

• table - 带横向滚动的表格容器
• thead - 表头，带背景色
• tbody - 表格主体
• th - 表头单元格
• td - 表格单元格
• tr - 表格行，带斑马纹效果

书籍交互组件（Book Interactive）

包括 BeforeAfterEditor、BREAKFramework、ChainExample、CodeEditor、DiffView、EmbeddingsDemo、PromptBuilder、Quiz、TokenizerDemo 等 50+ 个交互式教学组件。

儿童模式组件（Kids Elements）

包括 PromiCharacter、StoryScene、PromptParts、DragDropPrompt、LevelComplete 等 13 个儿童友好的交互组件。

使用方式

在 Next.js App Router 中，该文件会被自动识别为 MDX 组件配置文件。