时间戳

首页 > 解决方案 > 如何在 Gatsby 插件中使用 React 组件？

javascript - 如何在 Gatsby 插件中使用 React 组件？

问题描述

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

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

  return markdownAST
}

现在我不想只用 HTML 替换，而是想image用完整的 React 组件替换 s。这样，我可以编写一些友好的 Markdown 之类![](image.png)的，并通过此插件将其替换为 React 组件。我不想在 Markdown 中输入 JSX，我想保持 Markdown 文件不变。

我怎样才能做到这一点？我在一个单独的文件中有一个 React 组件等待使用。

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

...
<Image />
...

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

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

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

标签： javascriptreactjsmarkdowngatsby

解决方案

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

推荐阅读