В настоящее время я работаю над меню, используя Typescript (3.5.1), React (16.8.6), Material-Ui (v4) и CRA. Я использую List
от Material-UI. Я забыл добавить 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>
)
}
Я действительно не понимаю, в чем разница между этими двумя версиями, за исключением того, что я использую переменную во втором примере.
Кто-нибудь знает почему?