i18next-react-markdown 是一个用于 React 应用程序的npm包，它能够简化应用程序的国际化过程，同时也提供了易于使用的Markdown语法支持。它是使用 i18next 和 react-markdown 库来实现的，它们都在前端界广泛应用且被认为是最好的国际化和渲染Markdown的解决方案之一。
安装
使用 npm 安装 i18next-react-markdown：
$ npm install i18next-react-markdown
使用
前置条件
确保你的 React 应用程序已经使用 i18next 实现了国际化，如果没有，可以使用以下代码在根组件中添加国际化支持。
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- ------------
------ - --------------- - ---- ----------------
------ ---- ---- ---------
------ --- ---- --------
----------------
---------------- ------------
---- --
-------------------
-------------------------------
--使用 i18next-react-markdown
在你的组件中，你可以引入 i18next-react-markdown 并使用 i18next 和 Markdown 语法来处理文本信息。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ----- - ---- ----------------
------ ------------- ---- -----------------
------ -------------------- ---- -------------------------
-- -- ---------------------- -----
----- ---------- - -
-- -- -------------- ----
------ ---------------------
--
-- - ---- --- ---------------------- --
-------------------------------------
---- -----
------------ -----
---------- -
--- -
------------ -
--------- ----- -- - ------------ -------
--
--
--
---
------ ------- -------- ----- -
------ -
-----
--- -- ------- - -------- ------- ---
------ -------------------
--- -- ------------ ------------ - -- ---
------- ---- ---------- ------- -- --------------- ---------------------
--------
------
--
-当你应用这个例子时，你就可以强调你的文本并显示文本中的 Markdown 语法元素。
高级配置
使用 i18next-react-markdown 配置 Markdown 解析器
i18next-react-markdown 支持自定义 Markdown 解析器。在 parse 选项中传递一个函数引用，该函数应该以文本字符串作为参数，返回解析后的 HTML 字符串。
-- -------------------- ---- -------
------ -------- ---- -------------
------ ----------------- ---- -------------------------
-- -- ---- ---------
----------------------------------
---- -----
------------ -----
---------- ---
-- ------------
-------------- -
------ ---------
--
---使用其他选项
i18next-react-markdown 支持所有 react-markdown 选项。在 options 中传递一个对象，即可在 Markdown 渲染时传递选项。
以下是使用选项的例子：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ----- - ---- ----------------
------ ------------- ---- -----------------
------ - --- - ---- -------------
------ -------------------- ---- -------------------------
-- -- ---------- -------- -----------
----- --------------- - -
-------------- ------
--
-- - ---- --- ---------------------- -------
-------------------------------------
---- -----
------------ -----
---------- ---
------ -
----- -----
--
--------- ---------------- -- ------
---
-- ----
------ ------- -------- ----- -
------ -
-----
--- ------- -------- -- ---
------ -------------------
------- ---- ---------- ------- -- --------------- ---------------------
--------
------
--
-结论
通过 i18next-react-markdown，你可以使用 i18next 和 react-markdown 实现强大的国际化和渲染Markdown的解决方案。这个 npm 包允许你在维护国际化应用程序时更轻松地创建文字和文本区域，并使你的 Markdown 渲染过程更加简化。
希望这个教程对你有所帮助，也欢迎在评论中分享你的想法或应用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600668f3d9381d61a3540e18