วิธีส่งอุปกรณ์ประกอบฉากไปยังส่วนประกอบที่ส่งผ่านไปยัง MenuItem ใน material-ui

เพียงแสดง NotificationItem ภายใน MenuItem หากนั่นคือสิ่งที่คุณต้องการ

นอกจากนี้ อย่าลืมส่ง key prop ที่ไม่ซ้ำกันไปยังแต่ละองค์ประกอบที่แมปจากอาร์เรย์

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

หลังจากการค้นคว้า ฉันพบคำตอบใน การใช้งานองค์ประกอบ 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}
   />
  ))}