javascript - 如何动态地调用组件内的组件
问题描述
根据图像,如果我单击“业务设置”,则仅要渲染红色边框区域。标题和侧菜单栏是静态的。业务设置是一个组件...最后我需要在红色边框区域动态渲染组件
在“TriggerPath”函数中获取组件的名称和路径,并且我已经为该渲染部分“himsapp”提供了一个 ID,该渲染部分在哪里渲染组件。
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>
);
}
}
解决方案
推荐阅读
- java - Java 多态性和重载不同的数据类型
- sql - 长时间运行的查询 - 提高 Redshift 性能的建议
- amazon-elastic-beanstalk - 错误:CommandError - 未安装 SSH。在继续使用 ebcli 之前,您必须安装 SSH
- python - cv2.imshow() 导致 Chaquopy 出现问题并导致 android 应用程序崩溃
- regex - 如何只选择前瞻匹配
- spring - 春季请求验证
- solid-principles - SOLID - SRP,一份工作或改变的一个原因
- javascript - 在 vue.js 中为每个循环使用计算数据
- python - 是否可以使用同一模型中的其他字段数据制作 django 管理字段过滤器?
- python - pyinstaller - 冻结应用程序时 QtWebEngineWidgets 抛出 dll 错误