React.js用React-Markdown覆盖Markdown类型

Question

我正在使用内容丰富来获得对使用react-markdown来解析markdown的react组件的markdown

import ReactMarkdown from 'react-markdown';

    <Markdown source={text} />

我想做的是覆盖Renderer，所以我可以将自定义组件覆盖默认的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. 该反应-降价主页
2. 扫描“选项”部分以查看是否支持定制渲染
3. 找到了renderers选择，听起来很有希望
4. 单击该选项的文档中提供的链接
5. 看到的heading就是其中之一（这很有意义；我希望Markdown支持的每种主要格式都有一个渲染器）
6. 打开src目录，查看执行是否容易找到
7. 只有一个文件，所以我打开了它
8. 在页面上搜索“标题”并找到它
9. 在此处剪切并粘贴该代码

阅读文档和跟踪记录的能力非常重要。