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

工作原理：

布局已正确应用于我的每个页面 MDX文件正确地获取Hero和section组件，并正确地呈现容器的HTML/CSS 将加载并显示来自MDX的数据 什么不起作用：

未呈现英雄或节短代码中的MD！未转化为H1等。 我所尝试的：

在&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.

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,
};

---

使用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>

致：

或者，您也可以更改：

致：

另一个可能适合您的方法是使用标记解析器，如和：

---

或者，您可以添加一个自定义映射组件，就像使用MdxLink一样，但使用您自己的组件像依赖项一样解析子项。

使用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>

致：

或者，您也可以更改：

致：

另一个可能适合您的方法是使用标记解析器，如和：

---

或者，您可以添加一个自定义映射组件，就像使用MdxLink一样，但使用您自己的组件像依赖项一样解析子项。

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

它工作得非常好，无需任何额外工作：

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

<Hero>

# This is a test, but never gets transformed

</Hero>

<Section>

# In Section Headline

</Section>

...

---

注意空行

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

它工作得非常好，无需任何额外工作：

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

<Hero>

# This is a test, but never gets transformed

</Hero>

<Section>

# In Section Headline

</Section>

...

---

注意空行

尽管这是一个奇怪的解决方案，但似乎除了降价之外，目前还没有其他方法在html中呈现盖茨比图像组件！[]url方法，这是唯一对我有效的解决方案。尽管这是一个奇怪的解决方案，但似乎除了降价之外，目前在html中呈现盖茨比图像组件没有其他方法了！[]url方法，这是唯一适合我的解决方案。

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

---
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.

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

<Hero>

# This is a test, but never gets transformed

</Hero>

<Section>

# In Section Headline

</Section>

...