Reactjs 如何将道具传递给物料ui中传递给MenuItem的组件

我有以下代码来呈现通知菜单

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

{notifications.map（通知=>(
))}

---

我不明白的是如何使用我拥有的

notification

对象将道具传递给

NotificationItem

组件。

只要在

MenuItem

中呈现一个

NotificationItem

，如果这是您想要的

另外，请记住将唯一的

键

道具传递给从数组映射的每个元素

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

{notifications.map（（通知，i）=>(
))}

经过一番研究，我在地图上找到了答案

事实证明，提供给

ListItem

的所有附加道具都会传递到to

组件上

const{
组件：组件属性，
……其他
}=道具；
const componentProps={className，disabled，…other}；
设Component=componentProp | |'li'；
返回(
{儿童}
{children.pop（）}
);

^来自
ListItem.js的相关代码

因此，下面的代码将起作用

{notifications.map（通知=>(
))}
您能否解释一下
菜单项
的作用，或者您希望它做什么？您使用的是哪个版本的材质UI？菜单项是一个材质UI组件@darksmurf 3.6.2，这是错误的。如果您查看，组件道具的类型是
组件
，它还详细说明了“用于根节点的组件。使用DOM元素的字符串或组件。”没错，如果您愿意，您可以使用组件，但是您不能向其传递任何道具（如您的问题所要求的）。因此，您应该将组件放在菜单项本身中。感谢您指出
键
属性，我可能会在以后遇到问题我找到了在所有地方都这样做的方法…发布你自己问题的答案可以吗？尽管我希望你删除答案中的前两行，因为它们是不正确的，我不想传播错误信息，尽管这样做有效，如果有人能解释一下typescript是如何工作的，那就太好了，因为如果我尝试将
NotificationItem
道具添加到
MenuItem
中，会导致键入问题。