如何在Gatsby的React节点中正确渲染MDX内容？

核心问题分析 #

你遇到的问题源于gatsby-plugin-mdx的版本迭代：v3及以后版本移除了旧的<MDXRenderer/>组件，替换为<MDXContent/>；同时GraphQL查询返回的body字段是原始MDX文本，无法直接渲染，旧版本自动生成的children字段也已不再提供。

解决方案步骤 #

1. 调整GraphQL查询

保留必要字段即可，无需寻找已废弃的children：

query HomePageQuery {
  allMdx(filter: {fields: {source: {eq: "section"}}}) {
    edges {
      node {
        id
        fields {
          source
        }
        frontmatter {
          graphic
          title
        }
        body # 该字段是MDX原始内容，用于后续渲染
      }
    }
  }
}

2. 使用<MDXContent>渲染内容

从gatsby-plugin-mdx导入新组件，替换直接渲染body的逻辑：

// 导入MDXContent组件
import { MDXContent } from 'gatsby-plugin-mdx'

const Section = ({ frontmatter, body }) => {
  return (
    <section>
      <h1>{frontmatter.title}</h1>
      {/* 用MDXContent解析并渲染body */}
      <MDXContent body={body} />
    </section>
  )
}

3. 确认插件配置正确性

检查gatsby-config.js中的插件配置，确保指定了MDX扩展名：

module.exports = {
  plugins: [
    {
      resolve: `gatsby-plugin-mdx`,
      options: {
        extensions: [`.mdx`, `.md`],
        // 按需添加remark/rehype插件等其他配置
      },
    },
  ],
}

额外提示 #

如果你的gatsby-plugin-mdx版本低于v3，建议升级到最新稳定版——旧版本的API已被官方废弃，升级后按上述步骤调整即可正常渲染MDX内容。

内容的提问来源于stack exchange，提问作者Ryan