ListItem 与非 ListItems 嵌套的孩子？答案

【问题标题】：ListItem with non-ListItems nested children?ListItem 与非 ListItems 嵌套的孩子？
【发布时间】：2017-07-21 16:37:56
【问题描述】：

我真的需要一个 React 组件，就像您网站上的组件一样：

IMAGE

我需要的是一个带标题和右侧按钮的乐队。当你点击这个按钮时，它会打开一个下拉组件，你可以在上面调用其他组件（比如在你的网站上，有源代码，我想把其他组件放进去）

IMAGE

我需要一个下拉组件，使应用栏的整个宽度，例如当您单击查看源代码时在 material-ui 网站上。我需要放入我创建的其他组件，所以图标菜单不适合（您只能将 MenuItems 作为子项）。

为了更清楚，ListItem 会是完美的，但嵌套项目也只能是 List Items...所以我被阻止了。

<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网站上给你的例子，但是当你点击栏时你没有出现源代码，而是我的组件，就像一个！

如果有人有解决办法

【问题讨论】：

你有没有费心去查看网站？ material-ui.com/#/components/app-bar
@azium 我当然做了，但是没有解释当你点击右键时如何得到一个下拉组件
这里有解释material-ui.com/#/components/icon-menu
@azium 我不需要一个图标菜单，而是一个下拉组件，它使应用栏的整个宽度，就像当你点击查看源代码时，你看到了吗？
@azium 而且，有了 IconMenu 你只能在上面放 MenuItems，但是我需要放其他我创建的组件

标签： reactjs material-ui

【解决方案1】：

当然，你可以使用 flexbox 和 'material-ui/svg-icons/action/view-column' 和 material-ui 图标菜单来实现这一点

例如

<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
}

玩弄那个？

【讨论】：

感谢@Davet 的回答。问题是我需要一个下拉组件来制作应用栏的整个宽度，就像在 material-ui 网站上单击查看源代码时一样。此外，使用 IconMenu 您只能将 MenuItems 作为子项，但我需要放入我创建的其他组件

【解决方案2】：

React 组件似乎不可能，所以我用 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 使副标题和图标按钮并排

.row{
    display:flex;
    flex-direction:row;
}

在触摸图标按钮之前：

IMAGE

触摸图标按钮后（打开“下拉”div）：

IMAGE

完美运行。（不要忘记在你的状态下添加 drop:'close'）

【讨论】：