什么工作:
什么不起作用:
我试过的:
问题:
换句话说,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
}
}
}
}
`;
Gatsby 配置: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,
};
最佳答案
最后,这是一个简单的间距问题。
无需任何额外工作即可正常工作:
---
title: Main Content English
slug: /main-content/
---
<Hero>
# This is a test, but never gets transformed
</Hero>
<Section>
# In Section Headline
</Section>
...
注意空行!
关于javascript - Gatsby 不在 mdx 文件内的组件中渲染 MD,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/65491399/