Javascript 如何创建多个嵌套列表

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

因此，首先，我将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 />
}]

//关于页面中的技能列表
导出常量列表项=[
{
listText:'Html'，
列表图标：
},
{
listText:'CSS'，
列表图标：
},
{
listText:'JavaScript'，
列表图标：
},
{
listText:'反应'，
列表图标：，
埃潘：是的，
//分项
第一个文本：'React-Router'，
第二个文本：'React-Navigation'，
第三个文本：'React-Native'，
},
{
listText:'数据库'，
列表图标：，
埃潘：是的，
//分项
firstText:“FireBase”，
第二个文本：“SQL”，
},
{
listText:'ReactJs'，
列表图标：
},
{
listText:'ReactJs'，
列表图标：
}]

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

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

import React，{Fragment}来自“React”
从“./Styles”导入样式
//列表项
从“@material ui/core/List”导入列表；
从“@material ui/core/ListItem”导入ListItem；
从“@material ui/core/ListItemIcon”导入ListItemIcon；
从“@material ui/core/ListItemText”导入ListItemText；
从“@material ui/icons/ExpandLess”导入ExpandLess；
从“@material ui/icons/ExpandMore”导入ExpandMore；
从“@material ui/icons/StarBorder”导入StarBorder；
从“@material ui/core/Collapse”导入折叠；
从“./listItems”导入{listItems}
const AboutSkills=（）=>{
常量类=样式（）
const[open，setOpen]=React.useState（false）；
常量handleClick=（）=>{
setOpen（！open）；
};
常量输出列表=（）=>(
{//映射列表项并。。。
listItems.map（（项目，索引）=>{
//如果存在可展开项，请展开它们
if（item.expan）
{ 
{/*使用的片段instad，因为需要key属性*/}
返回
{item.listIcon}
{打开？：}
{/*{console.log（item.secondText）}*/}
{item.secondText//如果seconditem存在。。。
? 
：console.log（'No Third Item'）}
{item.thirdText//如果存在第二个项。。。
? 
：console.log（'No Third Item'）}
}否则{
返回
{item.listIcon}
}    
})}    
)
返回(
输出列表（）
)
}
导出关于技能的默认值

我的in-thread几乎就是您要搜索的内容。

---

只需根据您的情况调整代码。

在列表项中添加“parent”和“id”属性。所以，你们可以创建一个深嵌套的树，但数据存储在普通数组中。明白了！！谢谢，谢谢！！