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>
   ) 
}
MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1b3b43f-2c2aa.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1b3b43f-2c2aa.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?