嵌套的 MDX 组件

Question

我有一个在 mdx 文件中使用的组件问题是组件中的内容呈现为文本，但我想将它们呈现为 mdx。这是 mdx 文件的样子：

---
title: Topic 1
---
<Notice> Notice **Two** with link [link](https://angular.io/) </Notice>

outside look: Notice **Two** with link [link](https://angular.io/)

这是 Notice 组件

import React from "react";

const Notice = ({ children, type }: { children: any; type?: string }) => {
  return (
    <div style={{ border: "2px solid dodgerblue" }}>
      <p>{type}</p>
      <div>{children}</div>
    </div>
  );
};

export default Notice;

还有根文件的代码：


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

import Notice from './notice/notice';


export default function ({ docName, title, body, slug }) {
  const shortcodes = {Notice};
  return (
    <div style={gridWrapper}>
      <article>
        <h1>{title}</h1>
        <div>
          <MDXProvider components={shortcodes}>
              <MDXRenderer>{body}</MDXRenderer>
          </MDXProvider>
        </div>
      </article>
    </div>
  );
}

知道如何解决这个问题吗？

Answer 1

</Notice> this part in the mdx file should be rendered as a link and a bold text right?

除非您添加 MDX 渲染器或降价解析器（如 markdown-to-jsx）以将降价语法解析为 HTML。

，否则不会。

最后，您在 Notice 中包装的是使用 Notice 的组件 JSX 结构呈现的纯文本，其中 children 呈现为-是 ({children}).

也就是说，您可以尝试在 Notice 组件中使用 MDXRenderer，例如：

import React from "react";
import { MDXRenderer } from "gatsby-plugin-mdx"

const Notice = ({ children, type }: { children: any; type?: string }) => {
  return (
    <div style={{ border: "2px solid dodgerblue" }}>
      <p>{type}</p>
      <MDXRenderer>{children}</MDXRenderer>
    </div>
  );
};

export default Notice;

我不确定代码嵌套 MDXRenderer 的行为方式，这就是为什么我建议 markdown-to-jsx 解决方案，这将导致非常相似的情况，例如：

import React from "react";
import Markdown from 'markdown-to-jsx';

const Notice = ({ children, type }: { children: any; type?: string }) => {
  return (
    <div style={{ border: "2px solid dodgerblue" }}>
      <p>{type}</p>
      <Markdown>{children}</Markdown>
    </div>
  );
};

export default Notice;

嵌套的 MDX 组件

Nested MDX component

markdown

reactjs

gatsby