如何将Markdown渲染为纯React组件

本文概述

1.安装React Markdown组件
2.将其用作组件

Markdown是轻松编写文本的最明智的方法。允许用户以这种格式在数据库中编写和存储一些文本的许多应用程序, 总有一天需要将其呈现在某处。问题在于, 在每种平台上, 这种行为都可以通过不同的方式来处理, 一些开发人员可能只是将markdown转换为服务器端的HTML, 而其他一些开发人员, 例如对服务器端技术工作不多的前端开发人员, 只会在客户端将markdown转换为HTML。尽管这不是适用于所有应用程序(从每个浏览器和许多人使用)的最佳方法, 但当它仅适用于企业应用程序时, 用户将始终需要使用你的应用程序而不用抱怨它, 这是很好的。性能。
你需要处理的另一个问题是使用React时的调试过程, 使用React Dev Tools可以轻松调试哪些组件发生故障以及它们在哪里, 但是当你将Markdown转换为HTML时, 这并不是一件容易的事。反应这就是@rexxars开发了一个很棒的组件的原因, 该组件使你可以轻松地将markdown转换为React组件(在视图中呈现)。
1.安装React Markdown组件借助第三方组件React Markdown, 你将能够轻松地将普通的Markdown转换为视图中的React组件。要在项目上安装此组件, 请使用终端切换到项目目录, 然后运行以下NPM命令：

npm install --save react-markdown

你可以在Github上的官方仓库中获取有关此组件的更多信息。该组件在幕后使用令人敬畏的CommonMark, 这是Markdown语法的合理版本, 并带有C和JavaScript的规范和BSD许可的参考实现。有关更多信息, 请访问官方网站或Githbub上的存储库, 以获取更多信息。同时, 为了将降价转换为React组件, 它使用了Common Mark React Renderer模块, 这是CommonMark的Renderer模块, 它返回一个React元素数组, 准备在React组件中使用。
注意 React Markdown的唯一缺点是HTML内部的内联属性不起作用。
2.将其用作组件模块/库本身只是一个React组件, 可以轻松地嵌入到所需的任何React视图中, 只需导入react-markdown并设置一些选项即可：

import Markdown from 'react-markdown'; < Markdown escapeHtml={true}source={this.ContentMarkdown} />

因此, 你可以在应用内使用它, 例如：

import React from 'react'; // Import the Markdown componentimport Markdown from 'react-markdown'; export default class App extends React.Component {constructor(props, context) {super(props, context); // Define some Markdown contentthis.ContentMarkdown = `# Your markdown here \n < h1> This won't be translated into HTML< /h1> `; }render() {return (< div> {/* Render the markdown component */}< Markdown escapeHtml={true}source={this.ContentMarkdown} /> < /div> ); }}

可以允许/禁止的元素的可能类型是(以及转换为的Reacts组件)：