社区首页 >问答首页 >如何创建多个嵌套列表？

问如何创建多个嵌套列表？
EN

Stack Overflow用户

提问于 2020-07-09 07:34:40

回答 1查看 3.4K关注 0票数 3

因此，我试图创建一个列表，其中一个列表显示了许多项，其中两个项是可展开的，展开它们会显示更多的项(子项)。我已经成功地显示了列表，而子列表，但是，单击其中一个可扩展的项目，展开两个项目，而不仅仅是我单击的单一项目。

因此，首先，我将listItems分离为可以检索它们的数据结构。这是清单上的项目：

// Skills list in the About Page
export const listItems = [
{
    listText: 'Html',
    listIcon: <SendIcon/>
},
{
    listText: 'CSS',
    listIcon: <DraftsIcon />
},
{
    listText: 'JavaScript',
    listIcon: <InboxIcon />
},
{
    listText: 'React',
    listIcon: <SendIcon/>,
    expan: true,
    // SubItems
    firstText:'React-Router',
    secondText:'React-Navigation',
    thirdText:'React-Native',
},
{
    listText: 'Database',
    listIcon: <DraftsIcon />,
    expan: true,
    // SubItems
    firstText:'FireBase',
    secondText:'SQL',
},
{
    listText: 'ReactJs',
    listIcon: <DraftsIcon />
},
{
    listText: 'ReactJs',
    listIcon: <DraftsIcon />
}]

这是我试图实现列表的代码：

import React, { Fragment } from 'react'
import Styles from './Styles'

// ListItems
import List from '@material-ui/core/List';
import ListItem from '@material-ui/core/ListItem';
import ListItemIcon from '@material-ui/core/ListItemIcon';
import ListItemText from '@material-ui/core/ListItemText';
import ExpandLess from '@material-ui/icons/ExpandLess';
import ExpandMore from '@material-ui/icons/ExpandMore';
import StarBorder from '@material-ui/icons/StarBorder';
import Collapse from '@material-ui/core/Collapse';
import {listItems} from './ListItems'


const AboutSkills = () => {
const classes = Styles()

const [open, setOpen] = React.useState(false);
const handleClick = () => {
  setOpen(!open);
};

const outputList = () => (
    <>
        <List
            style={{color:'white'}}
            component="nav"
            className={classes.root}
        >
            { //Map through the ListItems and...
            listItems.map((item, index) => {
                // if expandable items exist, expand them
                if(item.expan) 
                { 
                    {/* Use fragment instad of <></> because key attribute is required */}
                    return <Fragment key={index}>
                                <ListItem button onClick={handleClick} className={classes.aboutList}>
                                    <ListItemIcon className={classes.aboutIcon}>
                                        {item.listIcon}
                                    </ListItemIcon>
                                    <ListItemText primary={item.listText} />
                                    {open ? <ExpandLess /> : <ExpandMore />}
                                </ListItem>
                                
                                <Collapse in={open} timeout="auto" unmountOnExit>
                                    
                                    <List component="div" disablePadding>
                                        <ListItem button className={classes.nested}>
                                            <ListItemIcon>
                                                <StarBorder />
                                            </ListItemIcon>
                                            <ListItemText classes={{primary:classes.expanText}}             
                                               primary={item.firstText} />
                                        </ListItem>
                                            {/* {console.log(item.secondText)} */}
                                        {   item.secondText //if seconditem exists...
                                            ? <ListItem button className={classes.nested}>
                                                    <ListItemIcon>
                                                    <StarBorder />
                                                    </ListItemIcon>
                                                    <ListItemText classes= 
                                            {{primary:classes.expanText}} primary={item.secondText} />
                                                </ListItem>
                                                : console.log('No Third Item')}

                                            {   item.thirdText //if seconditem exists...
                                            ? <ListItem button className={classes.nested}>
                                                    <ListItemIcon>
                                                    <StarBorder />
                                                    </ListItemIcon>
                                                    <ListItemText classes= 
                                             {{primary:classes.expanText}} primary={item.thirdText} />
                                                </ListItem>
                                                : console.log('No Third Item')} 

                                    </List>

                                </Collapse>
                            </Fragment>
                } else {
                    return <ListItem button className={classes.aboutList} key={index}>
                                <ListItemIcon className={classes.aboutIcon}>
                                    {item.listIcon}
                                </ListItemIcon>
                                <ListItemText classes={{primary:classes.unExpanText}} primary= 
                                 {item.listText} />
                            </ListItem>
                }    
            })}    
        </List>
    </>
)

return (
    outputList()
    )
}

export default AboutSkills