но наткнулся надинамическое предложение импорта а также этоYouTube видео , Мысль была бы отличной идеей использовать его для импорта компонентов по требованию в React.

Столкнувшись с проблемой, когда я не смог «разрешить» путь, когдаimport передается строковые литералы как переменные времени выполнения.

например:

<div>
<button onClick={this._fetchComp.bind(this, "../component/Counter")}>
Get Asyn Comp
</button>
</div>

Пробовал с несколькими опциями для _fetchComp, но передача параметров, похоже, не работает. Разбивка разных вариантов пробовала.

Шаблон строки Не работает : Приведенная ниже ошибка при клике

Error Error: Cannot find module '../components/Counter'. at webpackAsyncContext (^.*$:53)

Код

_fetchComp(res) {
import(`${res}`).then(() => {
    console.log("Loaded")
},(err)=>{
    console.log("Error",err)
})}

Variabes Не работает: Ошибка при сборке веб-пакета 55: 12-23Critical dependency: the request of a dependency is an expression

Код

_fetchComp(res) {
import(res).then(() => {
    console.log("Loaded")
},(err)=>{
    console.log("Error",err)
})}

Строковый литерал Работает : Просто передавая чистые строковые литералы. При нажатии я вижу загрузку чанка на вкладке «Сеть» dev tools.

Код

_fetchComp(res) {
import("../components/Counter").then(() => {
    console.log("Loaded")
},(err)=>{
    console.log("Error",err)
})}

Согласно спецификации,

import () принимает произвольные строки (с указанными здесь строками шаблонов, определяемыми во время выполнения), а не только статические строковые литералы.

Поэтому я надеялся, что строковый литерал сыграет свою роль, но, похоже, это не так.

Я сталкивался с подобной проблемой насредство отслеживания потока, Но предлагаемое решение снова выступает за использование строковых литералов.

Я оставлю вас всех сCodeSandbox ссылка.