React 动态导入不加载类答案

【问题标题】：React dynamic import doesn't load classesReact 动态导入不加载类
【发布时间】：2020-01-14 05:40:21
【问题描述】：

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

“元素类型无效：应为字符串（用于内置组件）或类/函数（用于复合组件）但得到：未定义。您可能忘记从定义的文件中导出组件，或者您可能混淆了默认和命名导入”

你有什么想法吗？

这是我导入组件的方式：

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

【问题讨论】：

标签： javascript reactjs dynamic-import

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

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

【讨论】：