所以我试图不复制代码并且可能使这变得过于复杂，但我很好奇是否有办法让这样的系统工作
<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。这不会产生任何错误（但也不会在 .
是的，这是可能的，而且您基本上都做对了。您刚刚{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>
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句