如何在使用 v6 單擊 Material UI 的 Listitem 時傳遞道具

戴夫戴夫

我的用例是我有一個聯繫人列表，我使用了材質 UI listItem 來創建列表，我正在通過路由將聯繫人對像傳遞給另一個組件，當我使用 useLocation 鉤子檢查時，我的狀態為 null，我使用的是v6路由器

代碼：

 <List className={classes.contactList}>
                {
                 props.contacts && props.contacts.map(contact => (
                     <ListItem component={Link} to={{pathname: `/contact/${contact.id}`, state:{ contact: props.contacts }}} divider={true} key={contact.id}>
                         <ListItemAvatar>
                             <Avatar>
                                <PersonPinCircleRounded></PersonPinCircleRounded>
                             </Avatar>
                         </ListItemAvatar>
                         <ListItemText primary={contact.name} secondary={contact.email}></ListItemText>
                         <DeleteOutline style={{ color: 'red'}} onClick={() => deleteHandler(contact.id)}></DeleteOutline>
                     </ListItem>

                 ))
                }
            </List>

德魯里斯

在react-router-dom版本 6state現在是頂級道具，而不是to道具對像上的屬性。

<ListItem
  component={Link}
  to={`/contact/${contact.id}`} 
  state={{ contact: props.contacts }}
  divider={true}
  key={contact.id}
>
  ...
</ListItem>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。