如何将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 component
import Markdown from 'react-markdown';
 
export default class App extends React.Component {
    constructor(props, context) {
        super(props, context);

        // Define some Markdown content
        this.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组件)：

• HtmlInline-内联HTML
• HtmlBlock-HTML块
• 文本-​​文本节点(在段落, 列表项等内部)
• 段落-段落节点(<p>)
• 标题-标题(<h1>, <h2>等)
• 软破-换行
• Hardbreak-硬断行(<br>)
• 链接-链接节点(<a>)
• 图像-图像节点(<img>)
• Emph-重点节点(<em>)
• 代码-内联代码节点(<code>)
• CodeBlock-代码块(<code>)
• BlockQuote-块引号(<blockquote>)
• 列表-列表节点(<ol>, <ul>)
• 物料-列出物料节点(<li>)
• 强-强/粗体节点(<strong>)
• ThematicBreak-水平规则节点(<hr>)

在这种情况下, 通过我们提供的降价, 生成的内容为：

注意

除非将unwrapDisallowed选项设置为true, 否则禁止节点还将阻止呈现该节点的所有子节点。例如, 禁止段落不会呈现其子文本节点。

编码愉快！