我真的需要React中的组件，就像你网站上的组件一样：
我需要的是一个带有标题的乐队和一个右边的按钮。 当您单击此按钮时，它会打开一个下拉组件，您可以在其上调用其他组件（例如在您的网站上，有源代码，我想将其他组件放入其中）
我需要一个下拉组件，它可以显示应用栏的全部宽度，就像在您点击查看源代码时在material-ui网站上一样。我需要添加我创建的其他组件，因此图标菜单不适合（您只能将MenuItems作为子项）。
更清楚的是，ListItem是完美的，但嵌套的项目也只能是列表项......所以我被阻止了。
<List>
<ListItem
primaryText="Profile 1"
initiallyOpen={false}
primaryTogglesNestedList={true}
key={1}
nestedItems={[
<ListItem
key={1-1}
primaryText="I am a list item component..."
disabled={true}
primaryTogglesNestedList={true}
/>
]}
/>
</List>
我想在ListItem中添加的代码是：
<TextField key={this.props.index} name="profileType" hintText="Type de profil" fullWidth={true} value={this.props.state.profileAgir.type.libelle} onChange={this.props.onChange}/>
<br />
<div>
<h2>Entités de couverture</h2>
<MyRGOCovTree onCheck={this.onCheckCov} key={this.props.index} multiple={true}/>
</div>
<div>
<h2>Entités d'exécution</h2>
<MyRGOExeTree onCheck={this.onCheckExe} key={this.props.index} multiple={true}/>
</div>
<div>
<h2>Entités juridiques</h2>
<MyEnttTree onCheck={this.onCheckEJ} key={this.props.index} />
</div>
{this.props.state.cube === "AGIR" &&
<div>
<div>
<h2>Filière</h2>
<Tree onCheck={this.onCheckFil} key={this.props.index} className="myCls" showLine showIcon={false} checkable defaultExpandedKeys={['ALL']} selectable={false} >
<TreeNode title="All" key="ALL">
<TreeNode title="Risques" key="Risques" >
<TreeNode title="Risques Opérationnels" key="Risques Opérationnels"/>
<TreeNode title="Risques de Marché" key="Risques de Marché"/>
<TreeNode title="Risques de Crédit" key="Risques de Crédit"/>
</TreeNode>
<TreeNode title="Juridique" key="Juridique" />
<TreeNode title="Finance" key="Finance" >
<TreeNode title="Comptabilité" key="Comptabilité"/>
<TreeNode title="Réglementaire" key="Réglementaire"/>
<TreeNode title="Autres" key="Autres"/>
</TreeNode>
<TreeNode title="Fiscalité" key="Fiscalité" />
<TreeNode title="Ressources Humaines" key="Ressources Humaines" />
<TreeNode title="Systèmes d'Information" key="Systèmes d'Information" >
<TreeNode title="Systèmes d'Information" key="S/Systèmes d'Information"/>
<TreeNode title="Sécurité des Systèmes d'Information" key="Sécurité des Systèmes d'Information"/>
</TreeNode>
<TreeNode title="Conformité" key="Conformité" />
<TreeNode title="Immobilier" key="Immobilier" />
<TreeNode title="Achats" key="Achats" />
<TreeNode title="Communication" key="Communication" />
</TreeNode>
</Tree>
</div>
<div>
<p> Données issues de la vue V_DWH_REF_FILIERE en DEV</p>
{this.props.filieresError && <div><i><b>{this.props.filieresError.message}</b></i></div>}
{this.props.filieresItems.length ? ( <MyFiliereTree key={this.props.index} onCheck={this.props.onCheck} items={this.props.filieresItems} checkedKeys={this.props.state.filieres}/> ) : 'loading...'}
</div>
<div>
<h2>Processus</h2>
<MyProcTree onCheck={this.onCheckProc} key={this.props.index} />
</div>
<div>
<h2>Confidentialité</h2>
<MyConfTree onCheck={this.onCheckConf} key={this.props.index} />
</div>
<div>
<h2>Application</h2>
<MyAppTree onCheck={this.onCheckApp} key={this.props.index} style={{paddingBot:20}} />
</div>
</div>
}
所以它非常大而且充满了不同的组件。 想象一下我在material-ui网站上给你的例子，但当你点击栏时你不会看到我的组件出现的源代码，比如！
如果有人有解决方案
答案 0 :(得分：0)
当然你可以使用flexbox和＆＃39; material-ui / svg-icons / action / view-column＆＃39;和material-ui图标菜单
e.g
<div className='toolbar'>
<div>
<IconMenu
iconButtonElement={<IconButton><ViewColum/></IconButton>}
anchorOrigin={{horizontal: 'left', vertical: 'top'}}
targetOrigin={{horizontal: 'left', vertical: 'top'}}
>
<MenuItem primaryText="Refresh" />
<MenuItem primaryText="Send feedback" />
<MenuItem primaryText="Settings" />
<MenuItem primaryText="Help" />
<MenuItem primaryText="Sign out" />
</IconMenu>
</div>
<div>
<span> {'Title'} </span>
</div>
</div>
.toolbar{
display: flex;
align-items: flex-start;
background-color: your-color
}
玩弄它？
答案 1 :(得分：0)
React Components似乎无法实现，所以我自己用Paper制作了它。
dropDownTrees = () => {
if (this.state.drop === "close") this.setState({drop: "open"});
else this.setState({drop: "close"});
}
render () {
console.log(this.state);
return (
<Paper zDepth={2}>
<div className='row'>
<Subheader>{this.props.label}</Subheader>
<IconButton onTouchTap={this.dropDownTrees}><Add/></IconButton>
</div>
{this.state.drop === 'open' &&
<div style={{marginLeft: 20}}>
<TextField key={this.props.index} name="profileType" hintText="Type de profil" fullWidth={true} value={this.props.state.profileAgir.type.libelle} onChange={this.props.onChange}/>
<br />
<div>
<h2>Entités de couverture</h2>
<MyRGOCovTree onCheck={this.onCheckCov} key={this.props.index} multiple={true}/>
</div>
<div>
<h2>Entités d'exécution</h2>
<MyRGOExeTree onCheck={this.onCheckExe} key={this.props.index} multiple={true}/>
</div>
<div>
<h2>Entités juridiques</h2>
<MyEnttTree onCheck={this.onCheckEJ} key={this.props.index} />
</div>
{this.props.state.cube === "AGIR" &&
<div>
<div>
<h2>Filière</h2>
<Tree onCheck={this.onCheckFil} key={this.props.index} className="myCls" showLine showIcon={false} checkable defaultExpandedKeys={['ALL']} selectable={false} >
<TreeNode title="All" key="ALL">
<TreeNode title="Risques" key="Risques" >
<TreeNode title="Risques Opérationnels" key="Risques Opérationnels"/>
<TreeNode title="Risques de Marché" key="Risques de Marché"/>
<TreeNode title="Risques de Crédit" key="Risques de Crédit"/>
</TreeNode>
<TreeNode title="Juridique" key="Juridique" />
<TreeNode title="Finance" key="Finance" >
<TreeNode title="Comptabilité" key="Comptabilité"/>
<TreeNode title="Réglementaire" key="Réglementaire"/>
<TreeNode title="Autres" key="Autres"/>
</TreeNode>
<TreeNode title="Fiscalité" key="Fiscalité" />
<TreeNode title="Ressources Humaines" key="Ressources Humaines" />
<TreeNode title="Systèmes d'Information" key="Systèmes d'Information" >
<TreeNode title="Systèmes d'Information" key="S/Systèmes d'Information"/>
<TreeNode title="Sécurité des Systèmes d'Information" key="Sécurité des Systèmes d'Information"/>
</TreeNode>
<TreeNode title="Conformité" key="Conformité" />
<TreeNode title="Immobilier" key="Immobilier" />
<TreeNode title="Achats" key="Achats" />
<TreeNode title="Communication" key="Communication" />
</TreeNode>
</Tree>
</div>
<div>
<p> Données issues de la vue V_DWH_REF_FILIERE en DEV</p>
{this.props.filieresError && <div><i><b>{this.props.filieresError.message}</b></i></div>}
{this.props.filieresItems.length ? ( <MyFiliereTree key={this.props.index} onCheck={this.props.onCheck} items={this.props.filieresItems} checkedKeys={this.props.state.filieres}/> ) : 'loading...'}
</div>
<div>
<h2>Processus</h2>
<MyProcTree onCheck={this.onCheckProc} key={this.props.index} />
</div>
<div>
<h2>Confidentialité</h2>
<MyConfTree onCheck={this.onCheckConf} key={this.props.index} />
</div>
<div>
<h2>Application</h2>
<MyAppTree onCheck={this.onCheckApp} key={this.props.index} style={{paddingBot:20}} />
</div>
</div>
}
</div>
}
</Paper>
);
}
}
我的CSS使Subheader和IconButton并排
.row{
display:flex;
flex-direction:row;
}
在触摸图标按钮之前：
触摸图标按钮后（打开“下拉列表”div）：
完美无缺。 （别忘了在你的州上添加drop：'close'）
