在 MDX 中嵌入 JSX

引言

MDX 最大的亮点之一，就是可以在 Markdown 文档中直接嵌入 JSX/React 组件，实现内容与交互的无缝融合。

基本用法

• 直接在 .mdx 文件中插入组件标签：

  <MyComponent prop="value" />
  

• 组件需通过 import 语句引入，或在渲染时通过 components 属性传递。

常见场景

• 插入自定义提示、警告、演示等 UI 组件
• 动态渲染图表、交互式代码块
• 复用页面片段，提升内容一致性

示例代码

import Demo from './Demo.jsx'

# 组件嵌入示例

普通 Markdown 内容

<Demo message="这是通过 JSX 组件渲染的内容！" />

注意事项

• 组件标签需单独成行，不能与 Markdown 内容混写
• 组件名需大写字母开头（符合 React 规范）
• 组件需在渲染环境中注册（如通过 components 属性传递）
• 不支持在代码块、行内代码、链接等 Markdown 语法内嵌入 JSX

总结

在 MDX 中嵌入 JSX 组件，让文档具备无限扩展能力。掌握组件嵌入技巧，是高阶内容创作的关键。