react引入渲染markdown文件

因为需要在项目中添加更新日志，而一般更新日志都是markdown文件，所以需要实现在react中引入并渲染markdown文件。

1. 安装依赖

npm install react-markdown

2. 使用，可能会发生两种情况，第一种是直接引入的markdown文件不能被识别，需要通过fetch来获取文件内容，如下

import React from 'react';
import Markdown from 'react-markdown';
import md from './README.md';class ChangeLog extends React.PureComponent {state = {markdown: ''}componentWillMount() {fetch(md).then(res => res.text()).then(text => this.setState({ markdown: text }));}render() {const { markdown } = this.state;return (<Markdown source={markdown} />);}
}export default ChangeLog;

另一种情况是能够直接识别到md文件，就不需要通过fetch，可以直接使用

import React from 'react';
import Markdown from 'react-markdown';
import md from './README.md';class ChangeLog extends React.PureComponent {render() {return (<Markdown source={md} />);}
}export default ChangeLog;

react引入渲染markdown文件相关推荐

前端页面渲染markDown文件
在我们开发vue组件的过程中,希望把markdown文档写的插件使用说明,也展现到页面中.那么具体怎么做呢? 1.安装vue-markdown-loader npm install vue-markd ...
【Vue】解析渲染markdown文件
1 安装依赖 npm i vue-markdown-loader -s npm i vue-loader vue-template-compiler -snpm i github-markdown-c ...
在React中解析渲染markdown文件
解决办法安装marked对md文件进行解析 npm install marked --save 基本使用 import { marked } from 'marked';const renderer ...
marked.js读取markdown文件，图片实现点击放大
marked.js图片实现点击放大一.基础配置二.设置回调三.最终代码四.优化方向一.基础配置当前前端渲染markdown文件比较好的插件就是marked.js了. import mark ...
网页渲染markdown（markdown-it）
网页渲染markdown(markdown-it) markdown-it基础使用安装markdown-it npm install markdown-it --save 2.初始化markdown ...
解析Markdown文件生成React组件文档
前言最近做的项目使用了微前端框架single-spa. 对于这类微前端框架而言,通常有个utility应用,也就是公共应用,里面是各个子应用之间可以共用的一些公共组件或者方法. 对于一个团队而言,项 ...
[react] React怎样引入svg的文件？
[react] React怎样引入svg的文件? import React from 'react'; import logo from './logo.png'; // Tell Webpack t ...
将markdown 文件渲染 mhtml 的方式
将markdown 文件渲染 mhtml 的方式 1. 使用 MacDown.app 打开对应的 md 文件 2. 菜单 - 文件 - 导出到 HTML 3. 将导出的 HTML 改成英文名 AAA. ...
html 渲染md文件,markdown的学习和.md文件使用
Markdown Table of Contents 标准 Markdown 标题 # H1 ## H2 ### H3 #### H4 ##### H5 ###### H6 另外, 对于 H1 和 H ...

react引入渲染markdown文件

react引入渲染markdown文件相关推荐

最新文章

热门文章