Как я могу создать несколько вложенных списков

Question

, поэтому я пытаюсь создать список, в котором список отображает много элементов, и два из них являются расширяемыми, а при их раскрытии отображается больше элементов (подэлементов). Мне удалось отобразить список и подсписки, однако, щелкнув один из раскрываемых элементов, вы развернули оба элемента, а не только тот, который я щелкнул.

Итак, во-первых, я разделил 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

Answer 1

Мой ответ в этот поток - это в значительной степени то, что вы ищете. Просто измените код в соответствии с вашей ситуацией.