@jslby

Как динамически подключать компоненты в ReactJS?

Есть вот такой код:
import React, {useState, useEffect} from 'react';
import { Container } from 'react-grid-system';

import Header from '../../ui/header';
import Footer from '../../ui/footer';

export default (props) => {
  const DynPage = require('./' + props.name);
  return(
    <div>
      <Header />
      <Container>
        <DynPage />
      </Container>
      <Footer />
    </div>
  )
}


Это база, добавится еще несколько эффектов, но даже в таком состоянии он не функционирует.
Пишет вот такую ошибку:
Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object.

Uncaught Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.


Из кода идея понятна, но постараюсь объяснить. Я хочу из одного компонента (index.js) подгружать "глупые" компоненты, которые лежат рядом. Все они идентичны, и всем нужен один и тот же функционал, меняется только текст. Именно поэтому вынес только текст в сторонние файлы.

Код работает, если выполнить import заранее и потом создать что то в духе асс. массив, где перечислены все компоненты, но это очень грязно, хотелось бы вот таким способом. В дальнейшем оберну в try...catch

P.S. props.name передается из роутера, с ним все ок
  • Вопрос задан
  • 240 просмотров
Пригласить эксперта
Ответы на вопрос 2
rockon404
@rockon404 Куратор тега React
Frontend Developer
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы