考虑我有一个文件夹，里面有这样的.md文件：
/static/blog/
example_title.md
another_example.md
three_examples.md
我有一个包含所有标题的数组：
const blogEntries = ["example_title", "another_example", "three_examples"]
在我的组件中，我想要import所有这些，请注意可能会更少或更多。
有什么方法可以动态导入它们，类似于：
for (let entry in blogEntries) {
import `Markdown_${entry}` from `/static/blog/${entry}.md`
}
后来在我的渲染中我可以这样做：
<Markdown_three_examples />
以上显然行不通，但我正在寻找一种方法来实现类似的目标。
您可以尝试使用动态导入- import(). 顾名思义，它们在运行时工作，并且可以具有动态 url。
注意：目前Chrome 和 Safari 原生支持它们，但不支持 firefox、IE 和 Edge。但是，您可以使用 webpack 来解决这个问题。
const blogEntries = ["example_title", "another_example", "three_examples"]
const loadEntries = (entries) =>
Promise.all(entries.map((entry) => import(`/static/blog/${entry}.md`)));
loadEntries(blogEntries)
.then((entries) => console.log(entries));
const Markdown = {}
for (let entry in blogEntries) {
Markdown[entry] = require(`/static/blog/${entry}.md`)
}
看看下面的链接。它本质上是使用外部库 - marked，获取内容，然后将内容呈现到屏幕上。本质上，您可以为所需的每个文件调用多次提取并动态呈现内容。
注意：ECMAScript 标准中有一个关于动态导入的提议。您可以在此处阅读更多相关信息：https : //developers.google.com/web/updates/2017/11/dynamic-import