极客教程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
项目结构：
完成上述步骤后，项目目录将如下所示：
示例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/，将显示以下结果：
示例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;
输出： 进入 http://localhost:3000/ 会显示以下结果：
参考： https://mui.com/material-ui/react-list/