Ключи в MUI <ListItem>не обязательны? - PullRequest
1 голос
/ 14 июня 2019

В настоящее время я работаю над меню, используя 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>
  )
}

Я действительно не понимаю, в чем разница между этими двумя версиями, за исключением того, что я использую переменную во втором примере.

Кто-нибудь знает почему?

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...