Блог

Итак, я пытаюсь не дублировать код и, вероятно, усложнять это, но мне очень любопытно, есть ли способ, чтобы такая система работала

         <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>