npm 包 mdast-react-render 使用教程

简介

mdast-react-render 是一个基于 Node.js 的 npm 包，它可以将 Markdown 文件（或字符串）转换为 React 组件，以便在 React 项目中渲染 Markdown 内容。

该包最初由 unifiedjs 团队维护和开发，基于 mdast AST（抽象语法树）和 remark 处理器。

该教程将向您介绍如何在您的 React 项目中使用 mdast-react-render。

安装

在您的 React 项目中使用 mdast-react-render，需要先将其作为依赖项安装到您的项目中。您可以通过 npm 或 yarn 安装：

npm install mdast-react-render

或

yarn add mdast-react-render

使用

使用 mdast-react-render 转换 Markdown 内容分为以下几个步骤：

1. 创建 mdast 处理器（processor）。
2. 将 Markdown 内容解析为 mdast AST。
3. 将 mdast AST 渲染为 React 组件。

创建 mdast 处理器

您需要首先创建一个指定渲染方式的 mdast 处理器。mdast-react-render 已经为您实现了一个处理器，您只需要引入即可：

const remark = require('remark')
const remarkReact = require('remark-react')
const mdastReactRenderer = require('mdast-react-render')

const processor = remark()
  .use(remarkReact, { createElement: mdastReactRenderer.createElement })

在这个处理器中，我们首先使用 remark 处理器，然后使用 remarkReact 插件将 mdast AST 渲染为 React 组件，其中 createElement 函数由 mdast-react-render 暴露。

将 Markdown 内容解析为 mdast AST

为了解析 Markdown 内容并转换它们为 mdast AST，我们需要在创建 processor 之后，将 Markdown 字符串传递给 remark 处理器：

const markdown = '# Hello, World!'

const mdast = processor.parse(markdown)

变量 mdast 现在将包含一个 AST，该 AST 对应于 markdown 变量中的 Markdown 内容。现在，我们可以使用 mdast-react-render 包将 AST 渲染为 React 组件。

将 mdast AST 渲染为 React 组件

mdast-react-render 暴露了 createReactElement 函数，该函数将接收一个 mdast AST，并返回一个 React 组件。我们可以将该组件渲染到我们的 React 应用程序中。

import React from 'react'

const Markdown = ({ mdast }) => {
  const markdownContent = mdastReactRenderer.createReactElement(mdast)
  return <div>{markdownContent}</div>
}

现在，您可以将 Markdown 组件添加到您的 React 应用程序中，并将 mdast AST 作为 mdast prop 传递给它：

-- -------------------- ---- -------
------ ----- ---- -------
------ -------- ---- ------------

----- --- - -- -- -
  ----- -------- - -- ------ -------
  ----- ----- - -------------------------

  ------ -
    -----
      --------- ------------- --
    ------
  -
-

------ ------- ---

示例代码

下面是一个完整的示例，演示了如何在 React 中使用 mdast-react-render。

-- -------------------- ---- -------
------ ----- ---- -------
------ ------ ---- --------
------ ----------- ---- --------------
------ ------------------ ---- --------------------

----- --------- - --------
  ----------------- - -------------- -------------------------------- --

----- -------- - -- ------ -------
----- ----- - -------------------------

----- -------- - -- ----- -- -- -
  ----- --------------- - --------------------------------------------
  ------ ----------------------------
-

----- --- - -- -- -
  ------ -
    -----
      --------- ------------- --
    ------
  -
-

------ ------- ---

现在，您已经可以使用 mdast-react-render 将 Markdown 内容渲染为 React 组件了。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005739381e8991b448e9842