javascript - Skapa en loop för att importera filer dynamiskt i React

Tänk på att jag har en mapp med .md-filer som detta:

/static/blog/
  example_title.md
  another_example.md
  three_examples.md

och jag har en array som inkluderar alla titlar:

const blogEntries = ["example_title", "another_example", "three_examples"]

I min komponent vill jag importera dem alla, notera att det kan vara färre eller fler.

Finns det något sätt att dynamiskt importera dem på liknande sätt:

for (let entry in blogEntries) {
  import `Markdown_${entry}` from `/static/blog/${entry}.md`
}

och senare i mitt renderingsprogram kan jag göra:

<Markdown_three_examples />

Ovanstående skulle uppenbarligen inte fungera, men jag letar efter ett sätt att uppnå något liknande.

Svar #1

Du kan försöka använda dynamiska importer - import(). Som namnet antyder fungerar de under körning och kan ha dynamiska url:er.

Observera: för närvarande stöds de nativt av Chrome och Safari, men inte av Firefox, IE och Edge. Du kan dock använda webpack för att lösa det.

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));

Svar #2

const Markdown = {}

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