Как передать реквизит компоненту, переданному в MenuItem в material-ui

Question

У меня есть следующий код для отображения меню уведомлений

      <Menu
        anchorEl={notificationAnchorEl}
        anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
        transformOrigin={{ vertical: 'top', horizontal: 'right' }}
        open={isNotificationMenuOpen}
        onClose={this.handleNotificationMenuClose}
      >
        {notifications.map(notification => (
          <MenuItem
            key={notification.id}
            component={NotificationItem}
            onClick={this.handleNotificationMenuClose}
          />
        ))}
      </Menu>

Чего я не понимаю, так это как передать реквизиты компоненту NotificationItem с помощью имеющегося у меня объекта notification.

Answer 1

После некоторых исследований я нашел ответ в реализации компонента ListItem .

Оказывается, что все дополнительные реквизиты, данные ListItem, передаются в component.

const {
  .
  .
  .
  component: componentProp,
  ...other
} = props;
.
.
.
const componentProps = { className, disabled, ...other };
let Component = componentProp || 'li';
.
.
.
return (
  <ContainerComponent
    className={classNames(classes.container, ContainerClassName)}
    {...ContainerProps}
  >
    <Component {...componentProps}>{children}</Component>
    {children.pop()}
  </ContainerComponent>
);

^ соответствующий код из ListItem.js

Таким образом, следующий код будет работать

        {notifications.map(notification => (
          <MenuItem
            component={NotificationItem}
            onClick={this.handleNotificationMenuClose}
            notification={notification}
          />
        ))}

Answer 2

Просто визуализируйте NotificationItem внутри MenuItem, если вы этого хотите.

Кроме того, не забудьте передать уникальную key опору каждому элементу, сопоставленному с массивом.

<Menu
    anchorEl={notificationAnchorEl}
    anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
    transformOrigin={{ vertical: 'top', horizontal: 'right' }}
    open={isNotificationMenuOpen}
    onClose={this.handleNotificationMenuClose}
>
    {notifications.map((notification, i) => (
        <MenuItem
           key={i}
           onClick={this.handleNotificationMenuClose}
        >
            <NotificationItem someProp={notification.someProp}/>
        </MenuItem>
    ))}
</Menu>