发现默认安装的 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 版本
方法一：
- 修改 package.json 中的 remark-gfm 版本，由 4.0.0，降级为 3.0.1
- 然后 tyarn install
修改后的版本号：
"react-markdown": "^8.0.7",
"remark-gfm": "^3.0.1",
方法二：
先删除，后安装指定的版本
tyarn remove remark-gfm
tyarn add remark-gfm@3.0.1
关于作者 🌱
我是来自山东烟台的一名开发者，有敢兴趣的话题，或者软件开发需求，欢迎加微信 zhongwei 聊聊， 查看更多联系方式
