React MUI列表展示

React列表 是一组连续的文本或图像。它们由包含主要和补充操作的项目组成，这些操作由图标和文本表示。Material UI是一个React UI组件库，实现了Google的Material Design。

它包括一个全面的预构建组件集合，可以直接在生产环境中使用。

MUI React中有不同类型的列表可用，包括：

基本列表： 这是一个简单的项目列表，允许使用特定项目显示或执行操作。
嵌套列表： 这是一个列表，列表中的项目内部有另一个子列表。
交互式列表： 这是一个列表，可以根据用户要求更改外观和行为。

在本文中，我们将创建一个演示React应用程序，展示一个带有复选框的嵌套列表和一个基本列表。

创建演示React应用程序：

步骤1： 使用以下命令创建一个React应用程序。

npx create-react-app myapp

步骤2： 创建完应用后，使用以下命令切换到应用的目录：

cd foldername

步骤3 : 使用以下命令安装material-UI模块。

npm install @mui/material @emotion/react @emotion/styled
npm install @mui/icons-material

项目结构：

完成上述步骤后，项目目录将如下所示：

React MUI列表展示

示例1：

在本示例中，我们将创建一个不同邮件类别的列表，它将使用嵌套列表格式来描述收件箱邮件类型的子分类。ExpandLess和ExpandMore用于关闭和打开收件箱列表项内的子列表。当点击时，handleClick方法会展开或折叠子列表。

NestedList.js：

import * as React from 'react';
import ListSubheader from '@mui/material/ListSubheader';
import List from '@mui/material/List';
import ListItemButton from '@mui/material/ListItemButton';
import ListItemIcon from '@mui/material/ListItemIcon';
import ListItemText from '@mui/material/ListItemText';
import Collapse from '@mui/material/Collapse';
import InboxIcon from '@mui/icons-material/MoveToInbox';
import DraftsIcon from '@mui/icons-material/Drafts';
import SendIcon from '@mui/icons-material/Send';
import ExpandLess from '@mui/icons-material/ExpandLess';
import ExpandMore from '@mui/icons-material/ExpandMore';
import StarBorder from '@mui/icons-material/StarBorder';
 
export default function NestedList() {
    const [open, setOpen] = React.useState(true);
 
    const handleClick = () => {
        setOpen(!open);
    };
 
    return (
        <List
            sx={{ width: '100%', maxWidth: 360, 
                bgcolor: 'background.paper' }}
            component="nav"
            aria-labelledby="nested-list-subheader"
            subheader={
                <ListSubheader component="div"
                    id="nested-list-subheader">
                    Nested List Items
                </ListSubheader>
            }
        >
            <ListItemButton>
                <ListItemIcon>
                    <SendIcon />
                </ListItemIcon>
                <ListItemText primary="Sent mail" />
            </ListItemButton>
            <ListItemButton>
                <ListItemIcon>
                    <DraftsIcon />
                </ListItemIcon>
                <ListItemText primary="Drafts" />
            </ListItemButton>
            <ListItemButton onClick={handleClick}>
                <ListItemIcon>
                    <InboxIcon />
                </ListItemIcon>
                <ListItemText primary="Inbox" />
                {open ? <ExpandLess /> : <ExpandMore />}
            </ListItemButton>
            <Collapse in={open} timeout="auto" unmountOnExit>
                <List component="div" disablePadding>
                    <ListItemButton sx={{ pl: 4 }}>
                        <ListItemIcon>
                            <StarBorder />
                        </ListItemIcon>
                        <ListItemText primary="Starred" />
                    </ListItemButton>
                    <ListItemButton sx={{ pl: 4 }}>
                        <ListItemIcon>
                            <StarBorder />
                        </ListItemIcon>
                        <ListItemText primary="UnRead" />
                    </ListItemButton>
                    <ListItemButton sx={{ pl: 4 }}>
                        <ListItemIcon>
                            <StarBorder />
                        </ListItemIcon>
                        <ListItemText primary="Read" />
                    </ListItemButton>
                </List>
            </Collapse>
        </List>
    );
}

创建了NestedList之后，我们将在基本文件App.js中导入它。在/src目录下更新App.js文件，使用以下代码：

App.js:

import React from "react";
import NestedList from "./NestedList";
 
function App() {
    return (
        <div>
            <NestedList />
        </div>
    );
}
export default App;

运行应用程序的步骤：

打开终端并输入以下命令来运行应用程序。

npm start

输出： 前往 http://localhost:3000/，将显示以下结果：

React MUI列表展示

示例2： 在这个例子中，我们将创建一个简单的带有复选框的列表，可以存储用户选择的项目，用于特定任务。

CheckBoxList.js

import * as React from 'react';
import List from '@mui/material/List';
import ListItem from '@mui/material/ListItem';
import ListItemButton from '@mui/material/ListItemButton';
import ListItemIcon from '@mui/material/ListItemIcon';
import ListItemText from '@mui/material/ListItemText';
import Checkbox from '@mui/material/Checkbox';
import IconButton from '@mui/material/IconButton';
import CommentIcon from '@mui/icons-material/Comment';
 
export default function CheckBoxList() {
    const [checked, setChecked] = React.useState([0]);
 
    const handleToggle = (value) => () => {
        const currentIndex = checked.indexOf(value);
        const newChecked = [...checked];
 
        if (currentIndex === -1) {
            newChecked.push(value);
        } else {
            newChecked.splice(currentIndex, 1);
        }
 
        setChecked(newChecked);
    };
 
    return (
        <List sx={{ width: '100%', maxWidth: 360, 
            bgcolor: 'background.paper' }}>
            {[0, 1, 2, 3].map((value) => {
                const labelId = `checkbox-list-label-{value}`;
 
                return (
                    <ListItem
                        key={value}
                        disablePadding
                    >
                        <ListItemButton role={undefined} 
                            onClick={handleToggle(value)} dense>
                            <ListItemIcon>
                                <Checkbox
                                    edge="start"
                                    checked={
                                        checked.indexOf(value) !== -1}
                                    tabIndex={-1}
                                    disableRipple
                                    inputProps=
                                    {{ 'aria-labelledby': labelId }}
                                />
                            </ListItemIcon>
                            <ListItemText id={labelId}
                                primary={`List{value + 1}`} />
                        </ListItemButton>
                    </ListItem>
                );
            })}
        </List>
    );
}

在创建完我们的CheckBoxList后，我们将把它导入到我们的基本文件App.js中。在/src目录下的App.js中更新以下代码，以使用我们的复选框列表。

App.js:

import React from "react";
import CheckBoxList from "./CheckBoxList";
 
function App() {
    return (
        <div>
            <CheckBoxList />
        </div>
    );
}
export default App;