前端项目实战贰拾肆-react-admin+material ui渲染树形结构

最新推荐文章于 2024-03-15 15:25:36 发布

前端歌谣

最新推荐文章于 2024-03-15 15:25:36 发布

阅读量207

点赞数

文章标签：前端 react.js ui

本文链接：https://blog.csdn.net/qq_41632427/article/details/131477402

版权

前端项目实战案例专栏收录该内容

500 篇文章

订阅专栏

文章展示了如何利用React和Material-UI库构建一个具有折叠功能的嵌套列表，包括ListSubheader、ListItem、ListItemIcon和Collapse组件的用法，用于创建邮件应用中的收件箱、草稿和已发送邮件列表。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

参考官网嵌套列表

import React from 'react';
import { makeStyles, Theme, createStyles } from '@material-ui/core/styles';
import ListSubheader from '@material-ui/core/ListSubheader';
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 Collapse from '@material-ui/core/Collapse';
import InboxIcon from '@material-ui/icons/MoveToInbox';
import DraftsIcon from '@material-ui/icons/Drafts';
import SendIcon from '@material-ui/icons/Send';
import ExpandLess from '@material-ui/icons/ExpandLess';
import ExpandMore from '@material-ui/icons/ExpandMore';
import StarBorder from '@material-ui/icons/StarBorder';

const useStyles = makeStyles((theme: Theme) =>
  createStyles({
    root: {
      width: '100%',
      maxWidth: 360,
      backgroundColor: theme.palette.background.paper,
    },
    nested: {
      paddingLeft: theme.spacing(4),
    },
  }),
);

export default function NestedList() {
  const classes = useStyles();
  const [open, setOpen] = React.useState(true);

  const handleClick = () => {
    setOpen(!open);
  };

  return (
    <List
      component="nav"
      aria-labelledby="nested-list-subheader"
      subheader={
        <ListSubheader component="div" id="nested-list-subheader">
          Nested List Items
        </ListSubheader>
      }
      className={classes.root}
    >
      <ListItem button>
        <ListItemIcon>
          <SendIcon />
        </ListItemIcon>
        <ListItemText primary="Sent mail" />
      </ListItem>
      <ListItem button>
        <ListItemIcon>
          <DraftsIcon />
        </ListItemIcon>
        <ListItemText primary="Drafts" />
      </ListItem>
      <ListItem button onClick={handleClick}>
        <ListItemIcon>
          <InboxIcon />
        </ListItemIcon>
        <ListItemText primary="Inbox" />
        {open ? <ExpandLess /> : <ExpandMore />}
      </ListItem>
      <Collapse in={open} timeout="auto" unmountOnExit>
        <List component="div" disablePadding>
          <ListItem button className={classes.nested}>
            <ListItemIcon>
              <StarBorder />
            </ListItemIcon>
            <ListItemText primary="Starred" />
          </ListItem>
        </List>
      </Collapse>
    </List>
  );
}

项目实现部分

 <Grid style={{ margin: 0, padding: 0, display: "flex" }}>
            <Grid style={{ width: "200px" }}>
                <Paper>
                    {items.map((item: any, i) => (
                        <Fragment key={'main' + i}>
                            <ListItem button onClick={handleClick}>
                                <ListItemText primary={item[0]} />
                                {open ? <ExpandLess /> : <ExpandMore />}
                            </ListItem>
                            {item[1].map((detailItem: any, j: any) => (
                                <Collapse in={open} timeout="auto" unmountOnExit>
                                    <ListM component="div">
                                        <ListItem button >
                                            <ListItemText primary={detailItem.title} />
                                        </ListItem>
                                    </ListM>
                                </Collapse>
                            ))}
                        </Fragment>
                    ))}
                </Paper>
            </Grid>