MDX 文件使用 React 组件示例

Leo

March 23, 2023

根据 MDX 文档的介绍，我们知道 MDX 允许您在 Markdown 内容中使用 JSX。您可以导入组件，例如交互式图表或通知，并将它们嵌入到内容中。这使得使用组件编写长篇内容变得更容易。🚀

翻译成大白话就是，MDX 可以解释为将 Markdown 与 JSX 结合在一起的格式，具体如下所示：

# Hello, world!
<div className="note">
  > Some notable things in a block quote!
</div>

在这个范例中，标题和引用的内容是 markdown格式，而其他的看起来和 Html 差不多的tag则是 JSX内容。我们如果将这段内容插入到当前的文章中，那最终就会渲染出以下效果：

Hello, world!

Some notable things in a block quote!

那么究竟有什么用处呢，我们来写一个简单的例子，比如我想向大家说明一下怎么通过tailwind来定制一个button的样式，如果不能引入组件我们就只能一边写代码，然后将代码渲染后截图，最后将代码复制粘贴到文章正文，同时在文章中插入截图。

现在MDX可以在文章中插入组件，那么我们可以在编辑dx文章时导入插件，直接渲染出组件的效果。

现在我们定义一个组件 Mybutton，

my-button.jsx

function MyButton() {
return (
<button className="px-2 border border-slate-400 text-slate-800 rounded-full">
  I'm a button
</button>
);
}
export default MyButton;

接下来我们在mdx文件中引入它：

blog.mdx

import Mybutton from './my-button';

并在适当的位置插入控件：

blog.mdx

那么我们就会得到如下效果：
<Mybutton />
我们结合 `@code-hike/mdx` 插件，将my-button.jsx 的内容引入进来，

那么我们就会得到如下效果：

我们结合 @code-hike/mdx 插件，将my-button.jsx 的内容引入进来，

blog.mdx

```js my-button.js
// from ./my-button.js
```

那么就可以得到如下效果：

my-button.js

function MyButton() {
  return (
    <button className="px-2 border border-slate-400 text-slate-800 rounded-full">
      I'm a button
    </button>
  );
}
export default MyButton;

发现了吗？我们不需要再复制粘贴源码，也不需要截图插入图片，就可以达到实际渲染效果与源码同时展示的效果。如果发现需要调整，也只需要修改my-button.js文件就可以。