Question

所以我试图不重复代码，可能会过度复杂化，但我很好奇是否有办法让这样的系统工作

        <Drawer anchor="right" open={sideBarOpen} onClose={toggleSideBar}>
          <List className={classes.sideBar}>
            {[
              ["test1", <LockOpenIcon />],
              ["test2", <LockOpenIcon />],
              ["test2", <LockOpenIcon />],
            ].map(({ text, icon }, index) => (
              <Fragment key={index}>
                <ListItem button>
                  <ListItemIcon>{icon}</ListItemIcon>
                  <ListItemText primary={text} />
                </ListItem>
                <Divider />
              </Fragment>
            ))}
          </List>
        </Drawer

在这里我映射成对的 [text, iconComponent] 数组，然后在以下元素中渲染 iconComponent。这不会产生任何错误（但也不会在 .

Answer 1

是的，这是可能的，而且您基本上都做对了。您刚刚在应该使用可迭代解构 ({text, icon}) 的地方使用了对象解构 ([text, icon])：

<Drawer anchor="right" open={sideBarOpen} onClose={toggleSideBar}>
    <List className={classes.sideBar}>
        {[
            ["test1", <LockOpenIcon />],
            ["test2", <LockOpenIcon />],
            ["test2", <LockOpenIcon />],
        ].map(([ text, icon ], index) => (
            <Fragment key={index}>
                <ListItem button>
                    <ListItemIcon>{icon}</ListItemIcon>
                    <ListItemText primary={text} />
                </ListItem>
                <Divider />
            </Fragment>
        ))}
    </List>
</Drawer>

但是，如果值是这样硬编码的，您可以考虑将其重复部分抽象为自己的组件：

const MyListItem = React.memo(({text, icon}) => (
    <ListItem button>
        <ListItemIcon>{icon}</ListItemIcon>
        <ListItemText primary={text} />
    </ListItem>
));

（React.memo 只是因为我认为除非 text 或 icon 发生变化，否则这不会改变。）

然后是：

<Drawer anchor="right" open={sideBarOpen} onClose={toggleSideBar}>
    <List className={classes.sideBar}>
        <MyListItem text="test1" icon={<LockopenIcon/>} />
        <Divider />
        <MyListItem text="test2" icon={<LockopenIcon/>} />
        <Divider />
        <MyListItem text="test3" icon={<LockopenIcon/>} />
    </List>
</Drawer>

如何在反应中从 .map() 渲染组件

1 个答案: