如何在React中动态导入MDX组件

Question

我创建了一个Article组件，它通过如下路由参数获得标题：

const Article = () => {
const params = useParams()
const dashedTitle = params.title.replace(/ /g, '-')

return (
<article>
<MyMDX />
</article>
);
}

我想返回一个与提供的标题同名的MDX文件。如果我使用import MyMDX from '../markdowns/mymdx.mdx在文章的顶部手动导入<MyMDX />组件，那么简单地返回它就可以了。但是，我看不到动态导入此文件的方法，具体取决于磁贴。

有办法做到这一点吗？或者我可以用更好的方式做到这一步吗？

Answer 1

我设法找到了一个解决方案：

const Article = () => {

const params = useParams()
const [article, setArticle] = useState()
dashedTitle = params.title.replace(/ /g, '-')
useEffect(() => {
import(`../markdowns/${dashedTitle}.mdx`).then(module => {
setArticle(module.default)
}).catch(err => {
console.log(err)
setArticle(undefined)
})
}, [dashedTitle])
return (
<article>
{article ? article : <NotFound />}
</article>
);
}

使用useEffect，导入MDX模块，然后将我的文章变量设置为模块的默认导出(这正是生成的JSX组件)。因此，我可以在返回段中使用它，以防它没有定义。

此外，我发现了一个类似的答案，可能会有所帮助。