Gatsby 是否提供了一种将从 Markdown 渲染的通用 HTML 元素映射到 React 组件的方法?

Question

我希望能够将我的Gatsby网站中已经定义和使用的组件用于从markdown节点渲染的元素。使用样式化组件，我有多个表示 html 元素的组件：

const PrimaryHeader = styled.h1`…`
const SecondaryHeader = styled.h2`…`
const TextList = styled.ul`…`
etc

是否有一种机制可以将 markdown 中定义的通用html 元素映射到反应组件，以便标记中定义的值为：

# Example

例如，由我的PrimaryHeader组件呈现。

似乎样式标记的唯一选择是使用后代选择器来定位渲染的 markdown 内容中的元素，当我已经为渲染这些元素定义了组件时，这感觉很笨拙且不必要。

请注意，Gatsby 确实支持自定义组件的映射，但这涉及将自定义 html 添加到 markdown 中。我希望降价是通用的。

Answer 1

是的，我为Gatsby文档添加了一个部分，解释了如何在此处复制：

从通用 HTML 元素映射

您还可以将通用 HTML 元素映射到您自己的组件之一。如果您使用的是样式化组件之类的东西，这可能特别有用，因为它允许您在 markdown 内容和网站的其余部分之间共享这些基元。这也意味着Markdown的作者不需要使用任何自定义标记 - 只需标准markdown。 例如，如果您有一系列标头组件：

const PrimaryTitle = styled.h1`…`
const SecondaryTitle styled.h2`…`
const TertiaryTitle styled.h3`…`

您可以将 markdown 中定义的标头映射到以下组件：

const renderAst = new rehypeReact({
createElement: React.createElement,
components: { 
"h1": PrimaryTitle,
"h2": SecondaryTitle,
"h3": TertiaryTitle,
},
}).Compiler;

在 markdown 中定义的标头将呈现为您的组件，而不是通用的 HTML 元素：

# This will be rendered as a PrimaryTitle component
## This will be rendered as a SecondaryTitle component
### This will be rendered as a TertiaryTitle component