介绍
remark-react 是一个将 markdown 转换为 React 组件的 npm 包。使用 remark-react 可以方便地将 markdown 文本转换为 React 组件，使得 markdown 文本可以在 React 应用中进行展示和渲染。
安装
可以使用 npm 安装 remark-react：
npm install 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.createElement( "div", {}, React.createElement("h1", {}, "标题1"), React.createElement("h2", {}, "标题2"), React.createElement("h3", {}, "标题3"), React.createElement("p", {}, "这是一段正文。") )
在 React 应用中，可以将以上代码渲染到页面：
-- -------------------- ---- ------- ------ ----- ---- -------- ------ - ------- - ---- ---------- ------ ----------- ---- --------------- ------ ----------- ---- --------------- ----- ------------ - - - --- -- --- --- --- ------- -- ----- ----- - --------- ----------------- --------------------- ----- --------------- - --------- ----------------- - -------------- ------------------- -- ------------------ -------- ----- - ------ ----------------------------- - ------ ------- ----展开代码
打开浏览器，可以看到渲染出来的页面。
配置
remark-react 提供了一些配置项，可以影响转换后的 React 组件。可以传入一个配置对象作为第二个参数，进行配置。
使用自定义组件
可以使用自定义组件来渲染 mdast 中的节点。传入一个包含组件的对象，可以将对应的节点渲染为对应的组件。
-- -------------------- ---- ------- ------ ----- ---- -------- ------ - ------- - ---- ---------- ------ ----------- ---- --------------- ------ ----------- ---- --------------- ----- ------------ - - - --- -- --- --- --- ------- - ---- - ---- -- ----- ----- - --------- ----------------- --------------------- ----- --------------- - --------- ----------------- - -------------- -------------------- ----------- - --- -- -------- -- -- --- -------- ------ ----- ------------------- --- -- -------- -- -- --- -------- ---------------- -------- ------------------- --- -- -------- -- -- --- -------- ------ ------ ------------------ - -- ------------------ -------- ----- - ------ ----------------------------- - ------ ------- ----展开代码
为根节点添加属性
可以为根节点添加属性，这些属性会传到最外层的父组件中。可以传入一个对象作为 rootProps 配置项，为根节点添加属性。
-- -------------------- ---- ------- ------ ----- ---- -------- ------ - ------- - ---- ---------- ------ ----------- ---- --------------- ------ ----------- ---- --------------- ----- ------------ - - - --- -- --- --- --- ------- -- ----- ----- - --------- ----------------- --------------------- ----- --------------- - --------- ----------------- - -------------- -------------------- ---------- - ---------- ---------- - -- ------------------ -------- ----- - ------ ----------------------------- - ------ ------- ----展开代码
总结
使用 remark-react 可以方便地将 markdown 转换为 React 组件。在 React 应用中，可以使用自定义组件和配置项来影响转换后的组件。以上是 remark-react 的基本使用方法和配置项，可以根据实际需求进行配置和扩展。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedb4e6b5cbfe1ea061138b
