ES6's import function to dynamically load components?

I want to use ES6"s import function to load the component dynamically, but it seems that there is something wrong with using the pose.

do you have any passing friends to guide me?

   

Oct.23,2021

Execute demo in

redner, and your demo is a function

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

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

or execute App

 this.setState({demo:App()})

the above comment says / / do something with TheComponent = Component.default
uses the default exported content

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

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

or

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

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