嵌套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>这个部分在mdx文件中应该呈现为一个链接和一个粗体文本，对吗？

除非您添加MDX或标记解析器(如markdown-to-jsx)来将标记语法解析为HTML，否则不会这样做。

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

尽管如此，您可以尝试在MDXRenderer组件中使用Notice，如下所示：

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;