Reactjs 使用react-markdown 覆盖markdown 类型

Question

我正在使用 contentful 将 Markdown 获取到使用 React-markdown 来解析 Markdown 的 React 组件

import ReactMarkdown from 'react-markdown';

    <Markdown source={text} />

我想要做的是重写渲染器，这样我就可以传递一个自定义组件来将默认的 h2 类型重写为我自己的 h2 组件，而不是将 ## 渲染为 h2 渲染。我怎样才能做到这一点，有没有例子？

Answer 1

<ReactMarkdown>

的选项之一是

renderers

。

其中一个常见渲染器处理标题。如果您查看默认渲染，您会看到以下内容：

heading: function Heading(props) {
    return createElement('h' + props.level, getCoreProps(props), props.children);
},

因此传入您自己的

heading

处理程序。大致检查一下里面的液位：

function CustomHeading(props) {
  if (props.level !== 2) {
    return createElement(`h${props.level}`, getCoreProps(props), props.children);
  }
  
  return <MyCustomElement {...props} />
}
  

如果您无法访问 commonmark-react-renderer 在函数上下文中为您提供的代码（您可能不会），那么您还需要复制

createElement

为您提供的代码（但它是简单）。

---

无关：我从未使用过

<ReactMarkdown>

（但会），但这花了我大约五分钟的研究时间。我将我的路径包括在内，以鼓励其他人深入研究自己的问题，并希望对如何研究此类问题提供一些见解。

1. react-markdown主页
2. 扫描“选项”部分以查看是否支持自定义渲染
3. 找到了

   renderers

   选项，听起来很有希望
4. 单击该选项文档中提供的链接
看到
5. heading

    就是其中之一（这是有道理的；我希望 Markdown 支持的每种主要格式都有一个渲染器）

打开
6. src

   目录看看是否很容易找到实现

只有一个文件，所以我打开了它
在页面中搜索“标题”并
8. 找到了
将该代码剪切并粘贴到此处

阅读文档和追踪线索的能力非常重要。

Answer 2

根据文档，您可以传递自定义组件。请参阅以下

链接。我只需要更改我的标题组件，因此我执行了以下操作。

  h1: (props) => {
  return <HeadingOne className="text-[--bg-button]" {...props} />;
},

您可以在 ReactMarkdown 组件中传递它们。请看以下例子

    <ReactMarkdown
      components={{
        h1: (props) => {
          return <HeadingOne className="text-[--bg-button]" {...props} />;
        },
      }}
        children={post}
    />

您还可以使用相同的逻辑更改其他 HTML 元素。