React 动态导入未加载 类

Question

我正在尝试动态导入 React 组件，以便在元素内呈现它。但是，它不起作用并抛出异常：

"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"

你有什么想法吗？

这是我导入组件的方式：

       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

您正在从组件中导出默认值。您可以选择命名组件的导出或在导入中使用默认值。

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

Answer 2

试试这个：https://codesandbox.io/s/pensive-darkness-vi3xe

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