React实现文本markdownit形式

1.项目组件中引用

复制代码
import markdownit from 'markdown-it';

2.运用到函数中

复制代码
const InterviewReportModal = ({ ResumeDetail }) => {
  const md = markdownit({ html: true, breaks: true });
}

export default InterviewReportModal;

3.运用到DOM中

html 复制代码
<div dangerouslySetInnerHTML={{ __html: md.render(ResumeDetail?.summaryReport || "") }} />

将数据中的summaryReport以markdownit形式显示

最终效果图:

相关推荐
cypking17 分钟前
Vue 3 + Vite + Router + Pinia + Element Plus + Monorepo + qiankun 构建企业级中后台前端框架
前端·javascript·vue.js
小小前端要继续努力21 分钟前
新一代前端框架深度解析:编译时优化、粒度更新与无序列化渲染
前端框架
雨雨雨雨雨别下啦1 小时前
【从0开始学前端】vue3简介、核心代码、生命周期
前端·vue.js·vue
simon_93491 小时前
受够了压缩和收费?我作为一个码农,手撸了一款无限容量、原图直出的瀑布流相册!
前端
e***87702 小时前
windows配置永久路由
android·前端·后端
Dorcas_FE3 小时前
【tips】动态el-form-item中校验的注意点
前端·javascript·vue.js
小小前端要继续努力3 小时前
前端新人怎么更快的融入工作
前端
四岁爱上了她3 小时前
input输入框焦点的获取和隐藏div,一个自定义的下拉选择
前端·javascript·vue.js
fouryears_234173 小时前
现代 Android 后台应用读取剪贴板最佳实践
android·前端·flutter·dart
boolean的主人3 小时前
mac电脑安装nvm
前端