0

想用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>
       ) 
    }
}

报的错,说的很明确,但不知道咋改。

clipboard.png

6 天前提问
3 个回答
1

已采纳

上面注释有写的 //do something with TheComponent = Component.default
使用的是默认导出的内容

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

redner里把demo执行下,你的demo是一个函数

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

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

或者把App执行下

 this.setState({demo:App()})
0
renderDemo = ()=>{ 
    import('../List/TableList').then((Component) => {
        //do something with TheComponent = Component.default
        const App = (<div>
                    <Component/>
                </div>);
        this.setState({demo:App});
    }) 
} 

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

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

撰写答案

你可能感兴趣的

推广链接