Reactjs 使用 react-markdown 覆盖 Markdown 类型

Question

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

import ReactMarkdown from 'react-markdown';

    <Markdown source={text} />

我想做的是覆盖渲染器，而不是将 ## 渲染为 h2 渲染，我可以传递一个自定义组件来覆盖默认的 h2 类型到我自己的 h2 组件。我该怎么做，有没有例子？

Answer 1

<ReactMarkdown>的选项之一是 renderers .
common renderers其中之一处理标题。如果你看 default rendering你会看到这个:

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> (但会)，但这花了我大约五分钟的研究时间。我包括我的路径，以鼓励其他人深入研究他们自己的问题，并希望对如何研究这些事情有一些见解。

react-markdown首页

浏览“选项”部分以查看是否支持自定义渲染

找到了 renderers选项，听起来很有希望

点击 the link在该选项的文档中提供

看到了heading是其中之一(这是有道理的；我希望 Markdown 支持的每种主要格式都有一个渲染器)

开通了src目录查看实现是否容易找到

只有一个文件，所以我打开它

在页面上搜索“标题”和 found it

在此处剪切并粘贴该代码

阅读文档和跟踪路径的能力非常重要。