Reactjs过激标记类型和react标记

Question

我正在使用contentful将其标记到使用react-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-renderer在您的函数上下文中提供的代码(您可能不会这样做)，那么您还需要复制createElement给您的代码(但它很简单)。

无关:我从未使用过<ReactMarkdown> (但威尔)，但我花了大约5分钟的时间进行研究。我包括我的道路，以鼓励其他人挖掘他们自己的问题，并希望给一些洞察力，这些事情如何可以被研究。

1. 反应-标记主页
2. 扫描“选项”部分，以查看是否支持定制呈现。
3. 找到了renderers选项，听起来很有希望
4. 单击该选项的文档中提供的链接
5. 看到heading是其中之一(这很有意义；我希望对Markdown支持的每一种主要格式都有一个渲染器)
6. 打开src目录，查看实现是否容易找到
7. 只有一个文件，所以我打开了它
8. 搜索页面中的“标题”和找到了
9. 在这里剪切和粘贴代码

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