MUI <ListItem>中的键不是强制性的吗?

时间:2019-06-14 15:12:56

标签: javascript reactjs material-ui

我目前正在使用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>
  )
}

除了在第二个示例中使用变量之外,我真的不明白这两个版本之间的区别。

有人知道为什么吗?

0 个答案:

没有答案