Gatsby 不会在 mdx 文件内的组件中呈现 MD

Question

什么是有效的：

布局已正确应用到我的每个页面
MDX文件正确获取Hero和section组件并正确渲染容器HTML/CSS
加载并显示来自 MDX 的数据

什么不起作用：

Hero 或 Section Shortcode 中的 MD 未呈现！ #不转化为H1等

我尝试过的：

在 Section & Hero 中使用 MDXRender => 错误
直接在 MDX 文件中使用组件而不是简码

问题：

是否无法在短代码中正确呈现 MD？换句话说，MDX 不是递归渲染的吗？

content/index.mdx:

---
title: Main Content English
slug: /main-content/
---

<Hero># This is a test, but never gets transformed</Hero>

<Section># In Section Headline</Section>

# ABC

Officia cillum _asdasd_ et duis dolor occaecat velit culpa. Cillum eu sint adipisicing labore incididunt nostrud tempor fugiat. Occaecat ex id fugiat laborum ullamco. Deserunt sint quis aliqua consequat ullamco Lorem dolor pariatur laboris. Laborum officia ut magna exercitation elit velit mollit do. Elit minim nostrud cillum reprehenderit deserunt consequat. Aliqua ex cillum sunt exercitation deserunt sit aliquip aliquip ea proident cillum quis.

我的 layout.js 看起来像这样：

import React, {useEffect} from "react";

import "./Layout.css";

import { MDXProvider } from "@mdx-js/react";
import { MdxLink } from "gatsby-theme-i18n";
...

import Hero from "../Hero/HomepageHero/HomepageHero"
import Section from "../Section/Section"


const components = {
  a: MdxLink,
  Hero, Section
};


export default function Layout({ children }) {
   ...
  return (
    <div className="appGrid">
      <Header />

      <ScrollToTopButton />

      <div className="cell contentCell">
        <MDXProvider components={components}>{children}</MDXProvider>
      </div>

      <Footer />

      <Copyright />
    </div>
  );
}

我的 index.js 页面（自动加载）如下所示：

import * as React from "react";

import { graphql } from "gatsby";

import Layout from "../components/Layout/layout";
import { MDXRenderer } from "gatsby-plugin-mdx";


const IndexPage = ({ data }) => {

  return (
    <Layout>
      {data.allFile.nodes.map(({ childMdx: node }) => (
        <div>
          {node ? (
            <MDXRenderer>{node.body}</MDXRenderer>
          ) : (
            <div>This page has not been translated yet.</div>
          )}
        </div>
      ))}
    </Layout>
  );
};

export default IndexPage;

export const query = graphql`
  query($locale: String!) {
    allFile(
      filter: {
        sourceInstanceName: { eq: "content" }
        childMdx: { fields: { locale: { eq: $locale } } }
      }
    ) {
      nodes {
        childMdx {
          body
        }
      }
    }
  }
`;

盖茨比配置：

module.exports = {
  siteMetadata: {
    siteUrl: "localhost:8000",
    title: "app",
  },
  plugins: [
    {
      resolve: "gatsby-plugin-google-analytics",
      options: {
        trackingId: "",
      },
    },
    "gatsby-plugin-sharp",
    "gatsby-plugin-react-helmet",
    "gatsby-plugin-sitemap",
    "gatsby-plugin-offline",
    {
      resolve: "gatsby-plugin-manifest",
      options: {
        icon: "src/images/icon.png",
      },
    },
    "gatsby-transformer-sharp",
    {
      resolve: "gatsby-source-filesystem",
      options: {
        name: "images",
        path: "./src/images/",
      },
      __key: "images",
    },
    {
      resolve: `gatsby-theme-i18n`,
      options: {
        defaultLang: `en`,
        locales: `en el de`,
        configPath: require.resolve(`${__dirname}/i18n/config.json`),
      },
    },
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `pages`,
        path: `${__dirname}/src/pages/`,
      },
    },
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `content`,
        path: `${__dirname}/src/content/`,
      },
    },
    {
      resolve: `gatsby-plugin-mdx`,
      options: {
        defaultLayouts: {
          default: require.resolve(`./src/components/Layout/layout.js`),
        },
      },
    },
  ],
};

Section.js 组件

import React from "react";
import PropTypes from "prop-types";
import "./Section.css";

export default function Section(props) {
  let content = props.children
  if (props.centered) {
    content = (
      <div className="grid-container ">
        {props.children}
      </div>
    );
  }
  return <div className="section">{content}</div>;
}

Section.propTypes = {
  centered: PropTypes.bool,
  children: PropTypes.element,
};

Answer 1

使用 MDX，您在 Markdown (MD + JSX) 文件中渲染 JSX，因此，# 它不是当它在同一声明行中时被 JSX 组件包装时被识别为简码：

变化：

<Hero># This is a test, but never gets transformed</Hero>

收件人：

<Hero>
    # This is a test, but never gets transformed
</Hero>

或者，您也可以更改：

<Hero># This is a test, but never gets transformed</Hero>

收件人：

<Hero><h1> This is a test, but never gets transformed</h1></Hero>

另一件可能对您有用的事情是使用 Markdown 解析器（如 markdown-to-jsx）和：

---
title: Main Content English
slug: /main-content/
---

import Markdown from 'markdown-to-jsx';


<Hero><Markdown># This is a test, but never gets transformed</Markdown></Hero>

<Section><Markdown># In Section Headline</Markdown></Section>

# ABC

Officia cillum _asdasd_ et duis dolor occaecat velit culpa. Cillum eu sint adipisicing labore incididunt nostrud tempor fugiat. Occaecat ex id fugiat laborum ullamco. Deserunt sint quis aliqua consequat ullamco Lorem dolor pariatur laboris. Laborum officia ut magna exercitation elit velit mollit do. Elit minim nostrud cillum reprehenderit deserunt consequat. Aliqua ex cillum sunt exercitation deserunt sit aliquip aliquip ea proident cillum quis.

或者，您可以像使用 MdxLink 一样添加自定义映射组件，但使用您自己的组件来解析 children 作为 <Markdown> 依赖项。

Answer 2

最后是一个简单的间距问题。

无需任何额外工作即可完美运行：

---
title: Main Content English
slug: /main-content/
---

<Hero>

# This is a test, but never gets transformed

</Hero>

<Section>

# In Section Headline

</Section>

...

注意空行！

Gatsby 不会在 mdx 文件内的组件中呈现 MD

Gatsby doesn't render MD in component inside of mdx file

javascript

reactjs

graphql

gatsby

mdxjs