盖茨比不会在 mdx 文件内的组件中渲染 MD

Question

工作原理：

• 布局正确应用于我的每个页面
• MDX文件正确地获得了Hero和section组件，并正确地呈现了容器的HTML/CSS
• 加载并显示MDX中的数据

什么不起作用：

• 英雄或章节短代码中的MD没有被渲染！#不转化为H1等

我尝试过的：

• 使用章节&英雄=>错误
• 直接在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.

我的布局.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+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到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>依赖项一样。