javascript - MUI 中的键不是强制性的吗?
问题描述
我目前正在使用 Typescript (3.5.1)、React (16.8.6)、Material-Ui (v4) 和 CRA 制作菜单。我正在使用List
来自material-ui的。我忘记key
在我的上添加一个,ListItems
并且在开发工具中没有警告。
我认为在列表项中强烈推荐键?当我没有为 a 提供密钥时,我已经在其他组件中收到了警告,ListItem
因此我尝试运行一些测试。
// This code shows no warning when rendered, even if no key
// was provided to the ListItem
render(){
return(
<List>
{ [
{text: 'files', icon: <FolderIcon />, path: '/my-files/'},
{text: 'shared files', icon: <SharedIcon />, path: '/shared-files'},
].map(item => (
<ListItem button>
<ListItemIcon>{item.icon}</ListItemIcon>
<ListItemText>{item.text}</ListItemText>
</ListItem>
))}
}
<List>
)
}
然而 :
// This code shows the warning "Each child in a list should have a unique "key" prop." when rendered
render(){
const items = [
{text: 'files', icon: <FolderIcon />, path: '/my-files/'},
{text: 'shared files', icon: <SharedIcon />, path: '/shared-files'},
]
return(
<List>
{ items.map(item => (
<ListItem button>
<ListItemIcon>{item.icon}</ListItemIcon>
<ListItemText>{item.text}</ListItemText>
</ListItem>
))}
}
<List>
)
}
我真的不明白这两个版本有什么区别,除了我在第二个例子中使用了一个变量。
任何人都知道为什么?
解决方案
推荐阅读
- pandas - 使用 pip 安装程序的 pandas 安装错误
- unity3d - 无法统一构建:“UnityEditor.BuildPlayerWindow+BuildMethodException:”
- c# - 如何在 asp.net 中设置反应环境?
- go - 在 Golang 中使用函数生成地图
- php - 在 php 中插入日期时添加 # 不起作用
- angular - 错误类型错误:无法读取未定义的属性“种植者”
- c# - TCP Socket 5 分钟后 CPU/内存使用率高
- asp.net - IIS:如何将现有网站添加为另一个网站中的应用程序
- android - 如何修复 AAPT2 警告 [以下项目选项已弃用并已删除:android.enableAapt2] 在 Android Studio 3.3 中
- mysql - 从端口 3306 更改为 3308 不起作用