如何在React组件中渲染同目录下的MDX文件内容？

要在首页组件中渲染about.mdx的内容，只需调整导入方式并直接使用编译后的MDX组件即可，具体操作如下：

1. 修正MDX文件的导入 #

将原来的import * as everything from './about.mdx'替换为直接导入默认导出的React组件：

import AboutContent from './about.mdx'

2. 在页面中渲染MDX内容 #

把代码里的<MDXContent></MDXContent>替换为导入的组件：

<AboutContent />

修改后的完整index.tsx代码 #

import React from 'react'
import { Link, graphql } from 'gatsby'
import { Wrapper, SectionTitle, Header, SectionSubTitle, SEO } from 'components'
import { Layout } from 'layouts'
import { Content } from 'layouts/components'
import Helmet from 'react-helmet'
import config from 'config/siteConfig'
import Data from 'models/Data'
import styled from 'styled-components'
// 修正MDX导入方式
import AboutContent from './about.mdx'

import { FeaturedPosts } from 'components/FeaturedPost'

interface Props {
  data: Data
}

const HomePage = (props: Props) => {
  const { edges } = props.data.allMdx

  return (
    <Layout>
      <Helmet title={`Blog | ${config.siteTitle}`} />
      <SEO path="/" data={{ title: config.siteTitleAlt }} />
      <Header>
        <SectionTitle>
          {config.siteTitle}
          <Line />
          <SectionSubTitle>{config.siteDescription}</SectionSubTitle>
        </SectionTitle>
      </Header>
      <Wrapper>
        {/* 渲染about.mdx的内容 */}
        <AboutContent />
      </Wrapper>
    </Layout>
  )
}

export default HomePage

export const query = graphql`
  query {
    allMdx(
      sort: { fields: [frontmatter___date, frontmatter___title], order: DESC }
      limit: 10
    ) {
      totalCount
      edges {
        node {
          fields {
            path
          }
          frontmatter {
            title
            date(formatString: "MMMM D, YYYY")
            standardDate: date(formatString: "YYYY-MM-DD")
          }
          excerpt(pruneLength: 200)
          timeToRead
        }
      }
    }
  }
`

const Line = styled.hr`
  color: white;
  width: 5rem;
  margin: 0.5rem auto;
  height: 3px;
`

const Title = styled.span`
  margin-right: 0.5rem;
`

const DateTag = styled.time`
  color: rgba(0, 0, 0, 0.5);
`

原理说明 #

Gatsby的MDX插件会自动将.mdx文件编译为React组件，文件的默认导出就是可直接使用的组件，因此无需额外处理MDX内容解析，直接导入并像普通React组件一样使用即可。

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