我正在使用React MUI抽屉,虽然我已经在列表中给子元素提供了key属性,但当React MUI抽屉打开时仍会收到警告消息。我附上了一些屏幕截图和示例代码。
抽屉菜单组件
我已经在下面组件的每个子项中包含了关键 prop,如所示,但仍然收到警告。
抽屉菜单列表组件
当我在浏览器中调试时,执行以下部分时会触发错误。
AppBarWithDrawer组件
import React from "react";
// Components
import { Box, AppBar, Toolbar } from "material-ui";
import DrawerMenu from "../navbar/drawerMenu";
export default function appBarWithDrawer() {
return (
<Box sx={{ flexGrow: 1 }}>
<AppBar position="static">
<Toolbar>
<DrawerMenu />
</Toolbar>
</AppBar>
</Box>
);
}
抽屉菜单组件
import React from 'react';
// Components
import { Button, Box, Drawer } from 'material-ui';
import CustomIcon from 'material-ui-icons';
import DrawerMenuList from './drawerMenuList';
// Constants
import { MENU_ICON } from 'material-ui-icon-types/iconTypes';
import { DASHBOARD_MENU_ICON_THEME } from 'material-ui-icon-types/themeTypes';
export default function DrawerMenu () {
// Drawer menu type
const LEFT_MENU_TYPE = 'left';
const Icon = ({ iconType }) => {
return (<CustomIcon icon={iconType} theme={DASHBOARD_MENU_ICON_THEME} />);
};
// Left Drawer Menu status
const [state, setState] = React.useState({
left: false
});
const toggleDrawer = (anchor) => (event) => {
if (event.type === 'keydown' && (event.key === 'Tab' || event.key === 'Shift')) {
return;
}
setState({ ...state, [anchor]: !state.left });
};
const list = (anchor) => (
<Box
sx={{ width: 240 }}
role="presentation"
onClick={toggleDrawer(anchor)}
onKeyDown={toggleDrawer(anchor)}
>
<DrawerMenuList />
</Box>
);
return (
<div>
<Button className="navHamburgerButton" onClick={toggleDrawer(LEFT_MENU_TYPE)}>
<Icon iconType={MENU_ICON} />
</Button>
<Drawer
anchor={LEFT_MENU_TYPE}
open={state[LEFT_MENU_TYPE]}
onClose={toggleDrawer(LEFT_MENU_TYPE)}
>
{list(LEFT_MENU_TYPE)}
</Drawer>
</div>
);
}
我已经在下面组件的每个子项中包含了关键 prop,如所示,但仍然收到警告。
抽屉菜单列表组件
import React from 'react';
import { List, Divider, ListItem, ListItemIcon, ListItemText } from 'material-ui';
import CustomIcon from 'material-ui-icons';
import {
SCHOOL_OUTLINED_ICON, SPEED_OUTLINED_ICON, FORMAT_LIST_NUMBERED_RTL_ICON,
CREATE_OUTLINED_ICON
} from 'material-ui-icon-types/iconTypes';
import { DASHBOARD_MENU_ICON_THEME } from 'material-ui-icon-types/themeTypes';
export default function DrawerMenuList () {
// Reusable icon for the Drawer List. The "DASHBOARD_MENU_ICON_THEME" theme is applied.
const Icon = ({ iconType }) => {
return (<CustomIcon icon={iconType} theme={DASHBOARD_MENU_ICON_THEME} />);
};
const drawerItems = [
{
id: Math.random(),
name: 'Dashboard',
icon: SPEED_OUTLINED_ICON
},
{
id: Math.random(),
name: 'Syllabus',
icon: FORMAT_LIST_NUMBERED_RTL_ICON
},
{
id: Math.random(),
name: 'Notes & Highlights',
icon: CREATE_OUTLINED_ICON
},
{
id: Math.random(),
name: 'Virtusal Classroom',
icon: SCHOOL_OUTLINED_ICON
}
];
return (
<List>
{drawerItems.map((item) => (
<ListItem button key={item.id}>
<ListItemIcon>
<Icon iconType={item.icon} />
</ListItemIcon>
<ListItemText primary={item.name} />
</ListItem>
))}
</List>
);
}
当我在浏览器中调试时,执行以下部分时会触发错误。