我目前正在使用Typescript(3.5.1),React(16.8.6),Material-Ui(v4)和CRA进行菜单处理。我正在使用material-ui中的List
。我忘记在key
上添加ListItems
,并且在开发工具中没有警告。
我认为强烈建议在列表项中使用键?不提供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>
)
}
除了在第二个示例中使用变量之外,我真的不明白这两个版本之间的区别。
有人知道为什么吗?