Динамический импорт React не загружает классы

Я пытаюсь динамически импортировать компонент React, чтобы отобразить его внутри элемента. Однако это не работает и выдает исключение:

"Тип элемента недействителен: ожидается строка (для встроенных компонентов) или класс / функция (для составных компонентов), но получено: undefined. Вы, вероятно, забыли экспортировать свой компонент из файла, в котором он определен, или вы могли перепутать по умолчанию и именованный импорт "

Есть ли у вас какие-либо идеи?

Вот как я импортировал компонент:

       import('../assessment/assessmentContainer').then(x=>{
        ReactDOM.render(<x.AssessmentContainer />, document.getElementById('root'));
       });       

    } ``` 

And this is my component which is exported

import React, { Fragment } from 'react';

``` export default class AssessmentContainer extends React.Component{
    render(){
        return(
            <Fragment>
                {"Assessment!"}
            </Fragment>
        )
    }
} ```

reactjs javascript dynamic-import
person Retro Code    schedule 14.01.2020    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Вы экспортируете значение по умолчанию из своего компонента. У вас есть возможность назвать экспорт вашего компонента или использовать значение по умолчанию при импорте.

import('../assessment/assessmentContainer').then(x=> {
    ReactDOM.render(<x.default/>, document.getElementById('root'));
});
person BlueWater86    schedule 14.01.2020

arrow_upward
1
arrow_downward

Попробуйте это: https://codesandbox.io/s/udget-darkness-vi3xe.

 import('../assessment/assessmentContainer').then(x=> {
      ReactDOM.render(<x.default.AssessmentContainer/>,
         document.getElementById('root'));
    });
person Kais    schedule 14.01.2020