如何在react中呈现.map()中的组件

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>