0

我想将返回的代码转换bundleMDX为我正在编写的 RSS 阅读器的字符串，这样我就可以使用它ReactDOMServer.renderToStaticMarkup(mdx)：

https://github.com/tailwindlabs/blog.tailwindcss.com/blob/acb8dcfbc733e25c0e1f4e8af5323da421071cbc/scripts/build-rss.js#L36

上面的 Tailwind 博客使用next-mdx-remote了它的工作原理，但我不确定如何在mdx-bundler.

我尝试在MDXLayoutRendererusing中包装代码mdxSource：

import { MDXProvider } from '@mdx-js/react'

export const MDXLayoutRenderer = ({ mdxSource, ...rest }: IMDXLayoutRenderer): JSX.Element => {
    const MDXLayout = React.useMemo(() => getMDXComponent(mdxSource), [mdxSource])

    return <MDXLayout components={MDXComponents as any} {...rest} />
}
.
.
.

const mdx = (
    <MDXProvider>
        <MDXLayoutRenderer mdxSource={code} />
    </MDXProvider>
)

但这会引发奇怪的 TS 错误，例如：

'MDXProvider' 指的是一个值，但在这里被用作一个类型。您的意思是“typeof MDXProvider”吗？ts(2749)

如果我创建mdx一个函数并从中返回值，那么它也不起作用：

const mdx = () => (
            <MDXProvider>
                <MDXLayoutRenderer mdxSource={code} />
            </MDXProvider>
        )

我所需要的只是传递一个html格式化的字符串，以便我可以将它发送到 RSS 包提要。

我的示例与 Tailwind 博客完全相同，但有 1 个区别：我使用的是mdx-bundler代替next-mdx-remote

我怎么解决这个问题？

4

1 回答 1

0

Oopsie 在进行复制时，我再次收到此错误：

'MDXProvider' 指的是一个值，但在这里被用作一个类型。您的意思是“typeof MDXProvider”吗？ts(2749)

这个错误很奇怪，但由于这个文件很小，我注意到我的扩展名是，.ts但我在mdx函数中使用了 JSX。

所以将扩展名更改为.tsx＆它工作。在这个奇怪的问题上停留了 2-3 周。

于 2021-09-11T13:33:18.240 回答