创建循环以在 React 中动态导入文件答案

【问题标题】：Create a loop to import files dynamically in React创建循环以在 React 中动态导入文件
【发布时间】：2019-03-28 03:07:05
【问题描述】：

假设我有一个包含 .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 />

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

【问题讨论】：

当你构建一个 react 应用程序时，你所有的导入/导出内容都会转换成一个大的 js 文件。无法动态导入内容，因为 babel 无法将其构建到其文件中。解决方案是构建一个 Markdown 组件和fetch() 挂载服务器后的 md 文件。
@ChrisG 你能举个例子吗？
您在哪方面需要帮助？在componentDidMount() 中，使用fetch() 加载 Markdown 文件。将其内容设置为您的状态的一部分，以便它被渲染。通过渲染多个组件，使用您的文件数组和map() 来实现循环。
现在有两个人建议使用import()，这根本不需要这样做，而且 imo 严格按照表面价值处理这个问题，而忽略了大局。这是我的看法：codesandbox.io/s/l2jlq3j78m

标签： javascript reactjs ecmascript-6

【解决方案1】：

您可以尝试使用dynamic imports - import()。顾名思义，它们在运行时工作，并且可以有动态 url。

注意：目前它们是 Chrome 和 Safari 的 supported natively，但不是 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));

【讨论】：

我对这种方法有以下问题：WARNING in ./path/to/file/index.js 63:13-53 Critical dependency: the request of a dependency is an expression @ ./src/app.js@./src/server-entry.js

【解决方案2】：

const Markdown = {}

for (let entry in blogEntries) {
  Markdown[entry] = require(`/static/blog/${entry}.md`)
}

【讨论】：

【解决方案3】：

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

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

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

【讨论】：

问题不在于渲染markdown，而在于动态包含静态文件。
啊，但是，正如您所读到的，OP 想要“最终”渲染 Markdown。
抱歉，动态 import() 仅在您使用浏览器端导入/导出时有效。它不适用于 React 的 babel 转译。此外，它仅适用于 Chrome，并且是实验性的。
很高兴你能做到。问题不仅在于动态导入，还在于动态导入 && 降价。为了减轻您的担忧，我编辑了我的答案，因为在未来的某个时候，可能会动态导入。
克里斯，正如我所说，这是一个很可能会被 Babel 和网络浏览器社区采纳的提案。