MDX 与 React 组件的完美结合
latte-girl·
MDXReact博客
什么是 MDX？
MDX = Markdown + JSX，让你在 Markdown 中使用 React 组件。
基础用法
# 欢迎使用 MDX
这是普通的 Markdown 文本。
<MyButton onClick={() => alert('Hello!')}>
点击我
</MyButton>
继续写 Markdown...自定义组件映射
const components = {
h1: (props) => <h1 className="text-4xl font-bold" {...props} />,
code: (props) => <CodeBlock {...props} />,
img: (props) => <Image {...props} loading="lazy" />,
}
<MDXRemote source={content} components={components} />实用场景
- 技术博客 - 交互式代码示例
- 文档站点 - 组件预览
- 教程平台 - 步骤指引
MDX 让内容创作更加灵活和强大！
