reactjs - 使用 mdx-bundler 时将 bundleMDX 返回的代码转换为 RSS 的 HTML 字符串
问题描述
我想将返回的代码转换bundleMDX
为我正在编写的 RSS 阅读器的字符串,这样我就可以使用它ReactDOMServer.renderToStaticMarkup(mdx)
:
上面的 Tailwind 博客使用next-mdx-remote
了它的工作原理,但我不确定如何在mdx-bundler
.
我尝试在MDXLayoutRenderer
using中包装代码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
我怎么解决这个问题?
解决方案
Oopsie 在进行复制时,我再次收到此错误:
'MDXProvider' 指的是一个值,但在这里被用作一个类型。您的意思是“typeof MDXProvider”吗?ts(2749)
这个错误很奇怪,但由于这个文件很小,我注意到我的扩展名是,.ts
但我在mdx
函数中使用了 JSX。
所以将扩展名更改为.tsx
&它工作。在这个奇怪的问题上停留了 2-3 周。
推荐阅读
- ios - 使用firebase在ios中推送通知
- c# - System.InvalidOperationException 与表单验证
- python - 简单的 Python 控制台程序提问
- hibernate - 原生图像构建过程在 Quarkus 中被冻结
- java - 程序流程问题
- spring-webflux - 如果在 Project Reactor 中使用 publishOn,订阅不会打印出任何日志
- xml - Xsl-transformation with grouping,获取祖先属性值
- python - python selenium bs4,不是从 https url 而是从带有服务器目录的 src 下载图像
- matlab - 如何在 Matlab 中从高斯 Copula 生成条件分布?
- python - “manage.py startapp”不创建 db.sqlite3