Question

考虑到我有一个包含.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 />

以上内容显然行不通，但我正在寻找一种实现类似目的的方法。

Answer 1

您可以尝试使用dynamic imports-import()。正如时间所暗示的那样，它们在运行时运行，并且可以具有动态网址。

注意：当前它们是supported natively的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));

Answer 2

到目前为止，尚不支持动态导入，但我们可以使用nodejs的require模块来实现此目的。

我将使用require的结构更新您的导入循环。

var dynamicImports = {};
for (let entry in blogEntries) {
    dynamicImports["Markdown_"+entry] = require("/static/blog/"+entry+".md");
}

，然后在渲染中可以执行以下操作：

<dynamicImports["Markdown_three_examples"]["default"] />

上面是默认导出，下面是命名模块导出，

<dynamicImports["Markdown_three_examples"]["ModuleName"] />

这就是我在项目中实现动态导入的方式，希望对您有所帮助。

Answer 3

请看以下链接。它实际上是使用外部库-marked，先获取内容，然后将内容呈现到屏幕上。本质上，您可以为所需的每个文件调用多个访存，并动态呈现内容。

How do I load a markdown file into a react component?

注意：ECMAScript标准中有一个关于动态导入的建议。您可以在此处了解更多信息：https://developers.google.com/web/updates/2017/11/dynamic-import

创建一个循环以在React中动态导入文件

3 个答案: