如何在 Gatsby 插件中使用 React 组件？答案

【问题标题】：How to use a React component inside a Gatsby plugin?如何在 Gatsby 插件中使用 React 组件？
【发布时间】：2019-12-27 11:04:07
【问题描述】：

我有一个 Markdown 插件，它获取 Markdown AST 并用一些 HTML 替换 image 节点：

module.exports = ({ markdownAST }) => {
  visit(markdownAST, 'image', node => {
      const html = `...`
      node.type = 'html'
      node.children = undefined
      node.value = html
  })

  return markdownAST
}

现在我不想只用 HTML 替换，而是想用完整的 React 组件替换 images。这样，我可以编写一些友好的 Markdown，例如 ![](image.png)，然后通过这个插件将它替换为 React 组件。我不想在 Markdown 中输入 JSX，我想保持 Markdown 文件原样。

我该怎么做？我在一个单独的文件中有一个 React 组件等待使用。

如果我使用gatsby-plugin-mdx，我可以直接在 Markdown 中添加一些 React 组件：

...
<Image />
...

但我想保留 Markdown 语法并仍然使用：

...
![](image.png)
...

但我希望在场景中（在我正在编写的转换器插件中），图像被转换为 React 组件，而不仅仅是如上所示的某些自定义 HTML。

【问题讨论】：

标签： javascript reactjs markdown gatsby

【解决方案1】：

Gatsby 不提供在 GraphQL 层中存储 React 组件实例的功能。这很关键，因为 GraphQL 查询结果数据最终会被序列化为每个页面/查询的 JSON (page-data.json)。

你可能会更好地使用一个好的专注于 React 的 Markdown 渲染器，比如 markdown-to-jsx，它允许你提供一个 React 组件或函数来用于任何给定的 HTML 元素：

import Markdown from "markdown-to-jsx"

export default ({ data }) => 
  <Markdown
    options={{
      overrides: {
        img: YourImageComponent,
        h1: ({ children, ...props }) => <h1 {...props}>Title: {children}</h1>,
      },
    }}
  >
    {data.page.markdownContent}
  </Markdown>

【讨论】：