什么是 @mdx-js/react？
@mdx-js/react 是一个 npm 包，它允许你使用 markdown 语法编写 React 组件。通俗地说，就是可以在写文章的同时，直接嵌入一些交互式的组件。
举个例子，假设你写了一篇文章介绍 React Hooks：
-- -------------------- ---- -------
- ----- ------- -------------------------------------
-------------- ---------------
-------- ------------------ -
----- ------- --------- - ------------
------ -
-----
------ ------- ------- ---------
------- ----------- -- -------------- - ----
----- ---
---------
------
--
-
----------------
---------------------- ----- --------------在上面的例子中，<CodeHighlight> 是一个自定义的组件，用来显示代码高亮。但是，如果我们想让这个组件更加交互式，例如可以直接通过组件来修改代码，那该怎么办呢？
这时候，@mdx-js/react 就派上用场了。通过它，我们可以将上面的代码片段改写成这样：
-- -------------------- ---- -------
------ - -------- - ---- --------
------ - ------------- - ---- ------------------
-- - ----- ------- -------------------------------------
-------------- -------------- ---------
--
-------- ------------------ -
----- ------- --------- - ------------
------ -
-----
------ ------- ------- ---------
------- ----------- -- -------------- - ----
----- ---
---------
------
--
---
----------------
---------------------- ----- --------------这里有两个变化。首先，我们引入了 useState，以便在代码片段中使用。其次，我们给 CodeHighlight 添加了一个 editable 属性，使它变得更加交互式。
如何使用 @mdx-js/react？
上面的例子只是一个小小的介绍。如果你想使用 @mdx-js/react 来写一篇完整的文章，该怎么办？
首先，你需要安装 @mdx-js/react 和其他相关依赖：
npm install --save @mdx-js/react @mdx-js/mdx babel-plugin-mdx
接着，在你的代码中使用 MDXProvider：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ----------- - ---- ----------------
------ - ------ - ---- ------------
------ --------- ---- ------------------
----- ---------- - -
--- ----- -- --- -------- ------ -------- -- ---------- --
-- --- -------
--
-------
------------ ------------------------
---------- --
---------------
--------------------------------
--这里，我们将 MyArticle 作为一个组件来渲染。MDXProvider 允许我们自定义组件的渲染方式，例如对于每个 h1，我们可以设置它的样式为红色。
最后，创建 MyArticle.mdx 文件，开始你的写作：
-- -------------------- ---- ------- - ----- ---- -- ------- ------------ ------ ---- --- -- --- ------ ---- ------ -- ---- ------ -------- -------------- --------------- -------- ------------------ - ------ --------- ------------------ - ------------ ------------ -- ---------------- ---------------- ----- -----------------
如果你运行这个 demo，你会发现页面上显示了一篇个性化的 markdown 排版的文章。当然，如果你希望更进一步，例如添加自定义组件或者样式等，都可以通过 MDXProvider 来实现。
总结
本文介绍了如何使用 @mdx-js/react 来编写交互式的 markdown 文章。如果你想将你的文章变得更有趣，加入一些交互式的组件，那 @mdx-js/react 可以省下你不少时间。当然，学习这个库也需要一定的时间和精力，但我相信它会对你有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/mdx-js-react