介绍
remark-react 是一个将 markdown 转换为 React 组件的 npm 包。使用 remark-react 可以方便地将 markdown 文本转换为 React 组件，使得 markdown 文本可以在 React 应用中进行展示和渲染。
安装
可以使用 npm 安装 remark-react：
--- ------- ------------
使用
使用 remark-react 进行 markdown 转换主要包括两个步骤：1、将 markdown 文本转换为 mdast（markdown 抽象语法树）；2、将 mdast 转换为 React 组件。
将 markdown 转换为 mdast
可以使用 remark-parse 包将 markdown 文本转换为 mdast：
------ - ------- - ---- ---------- ------ ----------- ---- --------------- ----- ------------ - - - --- -- --- --- --- ------- -- ----- ----- - --------- ----------------- ---------------------
将以上代码放入 React 应用中运行，可以在浏览器控制台中看到输出的 mdast：
-
------- -------
----------- -
-
------- ----------
-------- --
----------- -- ------- ------- -------- ----- --
--
-
------- ----------
-------- --
----------- -- ------- ------- -------- ----- --
--
-
------- ----------
-------- --
----------- -- ------- ------- -------- ----- --
--
-
------- ------------
----------- -- ------- ------- -------- --------- --
-
-
-将 mdast 转换为 React 组件
可以使用 remark-react 包将 mdast 转换为 React 组件：
------ ----- ---- -------- ------ - ------- - ---- ---------- ------ ----------- ---- --------------- ------ ----------- ---- --------------- ----- ------------ - - - --- -- --- --- --- ------- -- ----- ----- - --------- ----------------- --------------------- ----- --------------- - --------- ----------------- - -------------- ------------------- -- ------------------ -----------------------------
将以上代码放入 React 应用中运行，可以在浏览器控制台中看到输出的 React 组件：
-------------------- ------ --- ------------------------- --- ------- ------------------------- --- ------- ------------------------- --- ------- ------------------------ --- ---------- -
在 React 应用中，可以将以上代码渲染到页面：
------ ----- ---- -------- ------ - ------- - ---- ---------- ------ ----------- ---- --------------- ------ ----------- ---- --------------- ----- ------------ - - - --- -- --- --- --- ------- -- ----- ----- - --------- ----------------- --------------------- ----- --------------- - --------- ----------------- - -------------- ------------------- -- ------------------ -------- ----- - ------ ----------------------------- - ------ ------- ----
打开浏览器，可以看到渲染出来的页面。
配置
remark-react 提供了一些配置项，可以影响转换后的 React 组件。可以传入一个配置对象作为第二个参数，进行配置。
使用自定义组件
可以使用自定义组件来渲染 mdast 中的节点。传入一个包含组件的对象，可以将对应的节点渲染为对应的组件。
------ ----- ---- --------
------ - ------- - ---- ----------
------ ----------- ---- ---------------
------ ----------- ---- ---------------
----- ------------ - -
- ---
-- ---
--- ---
-------
- ----
- ----
--
----- ----- - ---------
-----------------
---------------------
----- --------------- - ---------
----------------- -
-------------- --------------------
----------- -
--- -- -------- -- -- --- -------- ------ ----- -------------------
--- -- -------- -- -- --- -------- ---------------- -------- -------------------
--- -- -------- -- -- --- -------- ------ ------ ------------------
-
--
------------------
-------- ----- -
------ -----------------------------
-
------ ------- ----为根节点添加属性
可以为根节点添加属性，这些属性会传到最外层的父组件中。可以传入一个对象作为 rootProps 配置项，为根节点添加属性。
------ ----- ---- --------
------ - ------- - ---- ----------
------ ----------- ---- ---------------
------ ----------- ---- ---------------
----- ------------ - -
- ---
-- ---
--- ---
-------
--
----- ----- - ---------
-----------------
---------------------
----- --------------- - ---------
----------------- -
-------------- --------------------
---------- - ---------- ---------- -
--
------------------
-------- ----- -
------ -----------------------------
-
------ ------- ----总结
使用 remark-react 可以方便地将 markdown 转换为 React 组件。在 React 应用中，可以使用自定义组件和配置项来影响转换后的组件。以上是 remark-react 的基本使用方法和配置项，可以根据实际需求进行配置和扩展。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/5eedb4e6b5cbfe1ea061138b