ReactMarkdown + remarkGfm：一切都按预期呈现，除了表格 - typeError？

Question

我正在测试 ReactMarkdown 以便能够从 chatgpt 生成的 Markdown 语法渲染 HTML 表。我已经安装了react-markdown和remarkGfm。但我不断收到此错误： TypeError 无法设置未定义的属性（设置 'inTable'）

当isolated + markdown被硬编码用于测试时，我在项目和codesandbox中都收到错误。这是代码：

import ReactMarkdown from 'react-markdown';
import remarkGfm from 'remark-gfm';

const MarkdownResponse = () => {
    const response = `
  # heading 1
  ## heading 2
  ### heading 3
  ~~strikethrough~~  

  > Blockquote  

  **strong**  
  *italics*  
  ***
  [Gmail](https://gmail.com)  
  ***
  1. ordered list
  2. ordered list
  - unordered list
  - unordered list  
  
  | Syntax      | Description |
  | ----------- | ----------- |
  | Header      | Title       |
  | Paragraph   | Text        |
  `;

    const tableStyles = `
    table {
      width: 100%;
      border-collapse: collapse;
    }
    th, td {
      border: 1px solid black;
      padding: 8px;
      text-align: left;
    }
  `;

    return (
        <div>
            <style>{tableStyles}</style>
            <ReactMarkdown
                remarkPlugins={[remarkGfm]}
                children={response}
                components={{
                    table: ({ node, ...props }) => (
                        <table style={{ border: '1px solid black' }} {...props} />
                    )
                }}
            />
        </div>
    );
};

export default MarkdownResponse;

我在这里阅读了几篇文章，据我所知，只要 remarkPlugins={[remarkGfm]} 就应该可以工作

我确实看到了一个线程，其中添加样式标签应该可以使其工作。但我也尝试过，但仍然遇到同样的错误。

链接到codesandbox

Answer 1

更新2023-10-08

由于React-markdown v9 已经发布，因此remark-gfm v4不再有问题。

旧答案

正如 @HHH 提到的，remark-gfm已于上周（2023 年 9 月 18 日）及其许多依赖项进行了更新。这是v3.0.1一次v.4.0.0重大更新。React-markdown的最新更新是2023 年 4 月 12 日的 v8.0.7，因此您可能认为它无法与最新版本一起使用remark-gfm，并且您正在研究的示例很可能不是最新的。

所以截至目前的兼容版本是

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

你可以试试

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

Answer 2

在这里遇到同样的错误！

编辑：看起来 remark-gfm 的版本已于 3 天前更新至 4.0.0。这可能会带来一些重大变化。我已将其降级到 3.0.1，它似乎可以很好地渲染 Markdown 表