Question

我已经有一段时间了。所以我有一些正在使用的嵌套导航json。一旦我进一步向下移动到兔子洞，顶层导航就会很好地加载（nav.map），我发现自己没有返回顶层或子层面的导航。一切编译成功。我只是想念它吗？

return(
 <List component="nav" className={classes.root}>
   {nav.map(function(element) {
     <ListItem
       button
       onClick={handleClick}
       id={element.toplevel}
       key={element.toplevel}
     >
       <ListItemText primary={element.toplevel} />
       {open ? <ExpandLess /> : <ExpandMore />}
     </ListItem>;
     return element.children.map(function(child) {
       return (
         <Collapse timeout="auto" unmountOnExit>
           <List component="div" disablePadding>
             <ListItem button className={classes.nested}>
               <ListItemIcon>
                 <StarBorder />
               </ListItemIcon>
               <ListItemText primary={child.name} />
             </ListItem>
           </List>
         </Collapse>
       );
     });
   })}
 </List>
);

Answer 1

确保您的地图回调函数实际上返回jsx代码。您的退货单设置不正确。

箭头函数语法是react-land中使jsx代码更具可读性的一种常用方法。这样，您就可以摆脱return语句并返回整个函数体（这只是语法糖）。

接下来的事情：请注意您的结束标记。我只是假设元素对象的列表项在ListItemText标记之后关闭，而第二个地图函数在元素ListItem之后打开一个新的列表项。 jsx仅允许您一次返回一个根标记。这就是为什么（如下面的注释所建议的那样）使用空的<> ... </>标签对作为根元素将解决此问题的原因。

return (
    <List component="nav" className={classes.root}>
      {data.nav.map((element) => (
        <>
        <ListItem
          button
          onClick={handleClick}
          id={element.toplevel}
          key={element.toplevel}
        >
          <ListItemText primary={element.toplevel} />
          {open ? <ExpandLess /> : <ExpandMore />}
        </ListItem>
        {
          element.children.map((child) => (
              <Collapse timeout="auto" unmountOnExit>
                <List component="div" disablePadding>
                  <ListItem button className={classes.nested}>
                    <ListItemIcon>
                      <StarBorder />
                    </ListItemIcon>
                    <ListItemText primary={child.name} />
                  </ListItem>
                </List>
              </Collapse>
          ))
        }
      </>
      ))}
    </List>
  );

沙盒链接：https://codesandbox.io/s/material-demo-uv7c7?fontsize=14&hidenavigation=1&theme=dark

Answer 2

尝试一下，我已经对其进行了一些重组。


 <List component="nav" className={classes.root}>
   {nav.map(function(element) {
     return(
     <ListItem
       button
       onClick={handleClick}
       id={element.toplevel}
       key={element.toplevel}
     >
       <ListItemText primary={element.toplevel} />
       {open ? <ExpandLess /> : <ExpandMore />}
     </ListItem>
     {element.children.map(function(child) {
       return (
         <Collapse timeout="auto" unmountOnExit>
           <List component="div" disablePadding>
             <ListItem button className={classes.nested}>
               <ListItemIcon>
                 <StarBorder />
               </ListItemIcon>
               <ListItemText primary={child.name} />
             </ListItem>
           </List>
         </Collapse>
       )
     })
    }
   }))}
 </List>
);

在.map（）内使用.map（）返回噩梦

2 个答案: