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

Question

什么工作：

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

什么不起作用：

• 未呈现英雄或部分简码中的 MD！# 不会转化为 H1 等。

我尝试过的：

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

题：

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

内容/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

最终这只是一个简单的间距问题。

它工作得很好，不需要任何额外的工作：

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

<Hero>

# This is a test, but never gets transformed

</Hero>

<Section>

# In Section Headline

</Section>

...

请注意空行！

Answer 2

使用 MDX，您将在 Markdown ( MD + JS X ) 文件中呈现 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但使用您自己的组件来解析childrenas<Markdown>依赖项。