嵌套MDX含量

Question

我有一个mdx文件，并在其中使用了一个组件。

---
title: Topic 1
---
<Test>[link](https://google.com/)</Test>

使用我的代码，Test组件的内容呈现为简单文本，但我也希望将它们呈现为mdx。

import * as React from "react";
import { MDXRenderer } from "gatsby-plugin-mdx";
import { MDXProvider } from "@mdx-js/react";
import { Test } from "./test";


export default function ({ docName, title, body, slug }) {
  const shortcodes = { Test };
  return (
     <MDXProvider components={shortcodes}>
        <MDXRenderer>{body}</MDXRenderer>
     </MDXProvider>
  );
}

Test组件是一个简单的组件，它只返回子部件export default Test = ({children}) => children的内容。

Answer 1

您需要使用像markdown-to-jsx这样的标记解释器，并且实现非常类似：

export default Test = ({children}) => <Markdown>{children}</Markdown>

此外，如果希望保留MDXProvider，请检查MDX的结构并添加一些空行空间(\n)，如：

<Test>

[link](https://google.com/)

</Test>