react markdown 组件支持 table 表格渲染

发现默认安装的 react markdown 组件不支持 table 表格的渲染。 在官方文档里查了一下，需要安装额外的组件 remark-gfm 来支持 table 渲染。

安装 remark-gfm

tyarn add remark-gfm

代码配置

import Markdown from "react-markdown";
import remarkGfm from "remark-gfm";

<div class="markdown_container">
  <Markdown remarkPlugins={[remarkGfm]} children={data} />
</div>

参数说明：

• remarkPlugins 代表启用的三方插件
• children 即需要渲染的 markdown 纯文本

报错

代码修改后，发现无法渲染 markdown 文本了。浏览器 Console 中报错：

TypeError: Cannot set properties of undefined (setting 'inTable')

参考：

https://stackoverflow.com/questions/77138105/reactmarkdown-remarkgfm-everything-renders-as-expected-except-tables-typee

It looks like the version of remark-gfm updated 3 days ago, to 4.0.0. That might have brought with it some breaking changes. I've downgraded it to 3.0.1 and it seems to render markdown tables fine 😄

从 package.json 里看，确实默认安装的 remark-gfm 版本为 4.0.0。

"react-markdown": "^8.0.7",
"remark-gfm": "^4.0.0",

修改 remark-gfm 版本

方法一：

1. 修改 package.json 中的 remark-gfm 版本，由 4.0.0，降级为 3.0.1
2. 然后 tyarn install

修改后的版本号：

"react-markdown": "^8.0.7",
"remark-gfm": "^3.0.1",

方法二：

先删除，后安装指定的版本

tyarn remove remark-gfm
tyarn add remark-gfm@3.0.1

微信关注我哦 👍

我是来自山东烟台的一名开发者，有感兴趣的话题，或者软件开发需求，欢迎加微信 zhongwei 聊聊， 查看更多联系方式