React 动态导入不加载类

Question

I am trying to import a React component dynamically, in order to render it inside an element. However, it doesn't work and throws an exception saying :

"Element type is invalid: Expected a string (for built in components) or a class/Function (for composite components) but got: undefined.You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports"

Do you have any idea?

This is how I have imported the component:

       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>
        )
    }
} ```

Answer 1

You are exporting a default from your component. You have the option of naming the export of your component or using the default in your import.

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

Answer 2

Try this : https://codesandbox.io/s/pensive-darkness-vi3xe

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