如何动态地调用组件内部的组件

Question

根据图像，如果我点击商业设置，只有要渲染的红色边框区域。标题和侧面菜单栏是静态的。业务设置是一个组件......最后我需要在红色边框区域动态渲染组件

In＆＃34; TriggerPath＆＃34;函数获取组件的名称和路径，我已经为该渲染部分提供了一个id＆＃34; himsapp＆＃34;在哪里渲染组件。

    import React, { Component } from 'react';
            class PersistentDrawer extends React.Component {

    state = {
        open: false,           
        title:"Dashboard"
      };
            const drawer = (
                  <Drawer
                    variant="persistent"
                    anchor={anchor}
                    open={open}
                    classes={{
                      paper: classes.drawerPaper,
                    }}
                  >
                    <div className={classes.drawerHeader}>
                      <div className="menuBar-title">
                        <span style={titleStyles.title}>ALGAEH</span>
                        <span style={titleStyles.organisation}>ERH</span>                                   
                        <IconButton onClick={this.handleDrawerClose} style={{color:"#fff"}}>
                          {/* {theme.direction === 'rtl' ? <ChevronRightIcon /> : <ChevronLeftIcon />} */}
                          <MenuIcon />                                                  
                        </IconButton>
                      </div>
                    </div>
                    <div className="hptl-phase1-sideMenuBar">
                      <Paper style={paper_style} className="paper" elevation={4}>
                        <div className="sideMenu-header">{MenuListItems}</div>
                      </Paper>
                    </div>
                  </Drawer>
                );

    TriggerPath(e) {
        for an exapmple path = "/BusinessSetup"
        const path = e.currentTarget.getAttribute("path");
        let screenName = e.currentTarget.innerText.replace(/\s/g, "");

        this.setState(
          {
            toggleSubMenu: true,
            title: screenName,
          },()=>{
            let component ="<" + this.state.title + " />";  

            component,document.getElementById("hisapp")
          });



  }

    render(){
            return (
              <div className={classes.root}>        
                <div className={classes.appFrame}>
                  <AppBar
                    className={classNames(classes.appBar, {
                      [classes.appBarShift]: open,
                      [classes[`appBarShift-${anchor}`]]: open,
                    })}
                  >
                    <Toolbar disableGutters={!open}>
                      <IconButton
                        color="inherit"
                        aria-label="open drawer"
                        onClick={this.handleDrawerOpen}
                        className={classNames(classes.menuButton, open && classes.hide)}
                      >
                        <MenuIcon />
                      </IconButton>
                      <Typography variant="title" color="inherit" noWrap>
                        {this.state.title}
                      </Typography>
                    </Toolbar>
                  </AppBar>          
                  {drawer}          
                  <main
                    className={classNames(classes.content, classes[`content-${anchor}`], {
                      [classes.contentShift]: open,
                      [classes[`contentShift-${anchor}`]]: open,
                    })}
                  >
                    <div className={classes.drawerHeader} />
                      <div className="container-fluid">
                        <Typography >  
                          <div id = "hisapp">
                            <Dashboard />              
                          </div>                  
                        </Typography>
                      </div>
                    </main>            
                </div>
              </div>
            );
    }
        }