前言
在 React 中使用 Markdown 是一件非常方便的事情。React-Marked-Perview-Editor 是一个基于 React、Marked 和 highlight.js 实现的 Markdown 编辑器和预览组件。本文将介绍如何使用 react-marked-preview-editor，帮助你更好地学习和使用这个 npm 包。
安装
要安装 react-marked-preview-editor，你需要先安装 Node.js 和 npm。如果你还没有安装，请前往 Node.js 官网下载并安装。
然后在命令行中输入以下命令来安装 react-marked-preview-editor：
npm install react-marked-preview-editor --save
使用
react-marked-preview-editor 提供了一个 Markdown 编辑器和预览组件，你可以在 React 中使用它们。下面是一个基本的使用示例：
-- -------------------- ---- -------
------ ----- ---- -------
------ ------------------- ---- -----------------------------
----- ----------- ------- --------------- -
------------------ -
------------
---------- - -
----- --
-
----------------- - ----------------------------
-
------------------ -
---------------------
-
-------- -
------ -
--------------------
-----------------------
----------------------------
--
-
-
-
------ ------- -----------在上面的代码中，我们实例化了一个 MyComponent，使用了 react-marked-preview-editor 的 MarkedPreviewEditor 组件并将它渲染到组件上。在组件的状态中，我们定义了一个 text 属性，这个属性会在输入内容变化的时候被更新。
MarkedPreviewEditor 接受两个参数：value 和 onChange。value 参数是一个字符串，用于定义当前输入的 Markdown 内容。onChange 是一个回调函数，它在输入变化的时候被调用。在示例中，我们将 handleChange 作为 onChange 参数传递给了 MarkedPreviewEditor 组件。
高级用法
react-marked-preview-editor 还提供了一些高级用法。例如，你可以配置 MarkedRenderComponent，用你自己的组件替换默认的标记呈现组件。你可以看到下面的示例代码：
-- -------------------- ---- -------
------ ----- ---- -------
------ ------------------- ---- -----------------------------
----- --------------------- - ------------- -- -
------ ---------------- -
---- ----------
------ -
--- -------------- --------
--------------------
-----
-
--------
------ ----
-
-
----- ----------- ------- --------------- -
------------------ -
------------
---------- - -
----- --
-
----------------- - ----------------------------
-
------------------ -
---------------------
-
-------- -
------ -
--------------------
-----------------------
----------------------------
---------------------------------------------
--
-
-
-
------ ------- -----------在示例中，我们定义了一个 CustomRenderComponent 组件，用于渲染 Markdown 标记。在 MyComponent 中，我们将 CustomRenderComponent 通过 MarkedRenderComponent 参数传递给了 MarkedPreviewEditor。
结论
在本文中，我们介绍了 npm 包 react-marked-preview-editor 的使用和一些高级用法。希望这篇文章能帮助你更好地使用 react-marked-preview-editor，并让你的 React 项目更加方便和高效。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055eb081e8991b448dc45c