Как сделать динамический импорт React?

Question

[NarkoMan01]

Добрый день!
Пытаюсь сделать динамический импорт в React.

/*
Переменная откуда я беру путь до компонента
*/
const steps = [
    {
        name: 'Шаг 1',
        component: './steps/step1.jsx'
    },
    {
        name: 'Шаг 2',
        component: './steps/step2.jsx'
    }
]

/*
Динамический импорт 
*/
 const Step =  React.lazy(()=> import(steps[0].component))

<React.Suspense fallback={<div>Loading...</div>}>
                <Step/>
            </React.Suspense>

То получаю ошибку о том что модуль не найдет.
Если же вставить строку то все работает

/*
При таком варианте все работает
*/
 const Step =  React.lazy(()=> import('./steps/step1.jsx'))

Подскажите пожалуйста в чем причина?

Answer 1

[Александр]

Сразу в component записывайте React.lazy.

Comments

[NarkoMan01]

не совсем понял.
Вы имеете ввиду сразу рендерить его?

<React.Suspense fallback={<div>Loading</div>}>
                 // но так ошибка, ибо нужно возвращать jsx
                {React.lazy(()=> import(steps[0].component))} 
            </React.Suspense>

[Александр]

NarkoMan01,

const steps = [
    {
        name: 'Шаг 1',
        component: React.lazy(() => import('./steps/step1.jsx'))
    },
    {
        name: 'Шаг 2',
        component: React.lazy(() => import('./steps/step2.jsx'))
    }
];

[NarkoMan01]

а нельзя ли это более динамически сделать?
Почему нельзя , через переменные?

[Александр]

NarkoMan01, Так и так же динамически, Вы потом просто будете по условию отображать определенный компонент. React.lazy просто обёртка.