使用MDX在md文件中解析React组件

背景

之前我们处理过 md 文件处理成 html 展示,使用 markdown 语法写文章，但是在此基础上做样式调整很麻烦，展现形式也不够丰富，所以我们想让 md 与 React JSX结合来丰富我们的展现形式。

这里我们将介绍如何使用 MDX 来实现我们的需求，MDX会将常规的 Markdown 和 JSX编译为Javascript，.md 后缀的文件名需要改成 .mdx 后缀。

在 React JSX 中使用 MDX

① 直接引用 @mdx-js/react 解析

  import {MDXProvider} from '@mdx-js/react'
  import Post from './post.mdx'
  // ^-- Assumes an integration is used to compile MDX to JS, such as
  // `@mdx-js/esbuild`, `@mdx-js/loader`, `@mdx-js/node-loader`, or
  // `@mdx-js/rollup`, and that it is configured with
  // `options.providerImportSource: '@mdx-js/react'`.

  const components = {
    em: props => <i {...props} />
  }

  <MDXProvider components={components}>
    <Post />
  </MDXProvider>

② 使用 webpack 或者 create-react-app(CRA), Next.js，下载配置 @mdx-js/loader 即可，loader 配置方法此处不详细介绍，请自行百度或Google。

在 Node 中使用 MDX，SSR 服务端渲染是会用到

安装 @mdx-js/node-loader@next, 此依赖包仅适用于 ESM（ES Module），需要 Node 12+ 才能使用它，并且必须使用import 而不是required。

import {renderToStaticMarkup} from 'react-dom/server.js'
import React from 'react'
import Content from './example.mdx'

console.log(renderToStaticMarkup(React.createElement(Content)))

最后

本文只介绍了React中 MDX 的使用，MDX 还可以在更多的地方使用：esbuild,rollup,Preact,Vue 3,Emotion等。

更多关于MDX的 用法及介绍参考链接： MDX官网