ES6的import函数来动态加载组件?

#1

https://segmentfault.com/q/1010000016925117

想用ES6的import函数来动态加载组件,但,仿佛,貌似使用姿势有点不对。

有路过的朋友指点下吗?

class Demo extends PureComponent { 
    state = {
        demo:12,
    };
    componentDidMount() {
         this.renderDemo();
    }
    renderDemo = ()=>{ 
        import('../List/TableList').then((Component) => {
            //do something with TheComponent = Component.default
            const App = () => {
                return (
                    <div>
                        <Component/>
                    </div> 
                )
              }
            this.setState({demo:App});
        }) 
    } 

    render() {
       const {demo}  = this.state;

       return (
        <div>
             {demo} 
        </div>
       ) 
    }
}

#3

已解决

const App = () => {
        return ( 
          <Component.default/>
       )
 }
 this.setState({demo:(App())});
#4

不是动态用require,静态用import?

#5

import跟import函数是两个东西哦

#6

React16.6 有提供了按需加载的API: React.lazy,或许也可以尝试一下。但不能用作 SSR。

1 Like
#7

好的好的,简单看了下,确实也可以实现我的需求。