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

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

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


reactjs material-ui
person ManavM    schedule 14.02.2019    source источник
comment
Можете ли вы объяснить, что MenuItem делает или чего вы хотите от него?   -  person cglacet    schedule 14.02.2019
comment
Какую версию Material UI вы используете?   -  person darksmurf    schedule 14.02.2019
comment
MenuItem - это компонент пользовательского интерфейса материала material-ui.com/api/menu-item   -  person ManavM    schedule 14.02.2019
comment
@darksmurf 3.6.2   -  person ManavM    schedule 14.02.2019

Ответы (2)


arrow_upward
1
arrow_downward

Просто визуализируйте 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>
person darksmurf    schedule 14.02.2019
comment
Это неверно. Если вы посмотрите документацию, типом свойств компонента является Component, Также разработан компонент, используемый для корневого узла. Либо строка для использования элемента DOM, либо компонент. - person ManavM; 14.02.2019
comment
Правильно, вы можете использовать компонент, если хотите, но тогда вы не можете передавать ему какие-либо реквизиты (как было запрошено вашим вопросом). Поэтому вместо этого вы должны поместить компонент внутри самого MenuItem. - person darksmurf; 14.02.2019
comment
Спасибо, что указали на опору key, однако я, вероятно, столкнулся бы с проблемами позже - person ManavM; 14.02.2019
comment
Я нашел способ сделать это в реализация ListItem всех мест ... можно ли публиковать ответы на свой вопрос? - person ManavM; 14.02.2019
comment
Я обновил свой ответ, чтобы сделать его более ясным. Если вы думаете, что у вас есть лучший ответ, обязательно ответьте на свой вопрос. - person darksmurf; 14.02.2019
comment
Хотя я был бы признателен, если бы вы удалили первые две строки из ответа, поскольку они неверны, и я не хотел бы распространять дезинформацию. - person ManavM; 14.02.2019

arrow_upward
1
arrow_downward

После некоторого исследования я нашел ответ в реализация компонента 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}
   />
  ))}
person ManavM    schedule 14.02.2019
comment
Хотя это работает, было бы здорово, если бы кто-нибудь мог объяснить, как это будет работать с машинописным текстом, поскольку это вызовет проблемы с набором текста, если я попытаюсь добавить NotificationItem реквизиты в MenuItem. - person ManavM; 14.02.2019