通知菜单

export class NotificationMenu extends Component {
      ###some business logic when mounting component########

    render() {
      const dropdownmenu = (            #<-------- Over here i am initializing a constant for the drop down menu as per antd's recommendation.
        <Menu>
              this.props.notifications.notifications.map(notifications => (<NotificationsListRow key={notifications.id} {...notifications} />
              ))

        </Menu>
      );
        return (
            <React.Fragment>
                <Dropdown overlay={dropdownmenu} onVisibleChange={this.handleVisibleChange}
                  visible={this.state.visible} placement="bottomRight" trigger={['click']}
                   overlayStyle={{maxHeight:350,overflowY:'scroll'}}>

                <Button icon={<BellFilled/>} shape="circle"/>

             </Dropdown>
            </React.Fragment>
        )
    }
}
   
export default NotificationMenu;

这是我用来呈现下拉菜单项的“列表”的内部子组件。

通知列表行：

const {Text} = Typography
const {Title} = Typography
export default function NotificationsListRow(props) {

    return (
            <Menu.Item className="notifications">
            <a>
                <Title level={4}> {props.object_type} </Title>
                <Text>{props.object_preview}</Text>
                <Text muted>{props.time}</Text>
            </a>
          </Menu.Item>
    )
}

然而，这会导致渲染非常缓慢和错误。每当我将鼠标悬停在下拉菜单项上时，它都会在控制台中显示以下内容：

Uncaught TypeError: onItemHover is not a function

完整的跟踪在这里：

MenuItem.js:80 Uncaught TypeError: onItemHover is not a function
at MenuItem._this.onMouseEnter (MenuItem.js:80)
at HTMLUnknownElement.callCallback (react-dom.development.js:188)
at Object.invokeGuardedCallbackDev (react-dom.development.js:237)
at invokeGuardedCallback (react-dom.development.js:292)
at invokeGuardedCallbackAndCatchFirstError (react-dom.development.js:306)
at executeDispatch (react-dom.development.js:389)
at executeDispatchesInOrder (react-dom.development.js:411)
at executeDispatchesAndRelease (react-dom.development.js:3278)
at executeDispatchesAndReleaseTopLevel (react-dom.development.js:3287)
at Array.forEach (<anonymous>)
at forEachAccumulated (react-dom.development.js:3257)
at runEventsInBatch (react-dom.development.js:3304)
at runExtractedPluginEventsInBatch (react-dom.development.js:3514)
at handleTopLevel (react-dom.development.js:3558)
at batchedEventUpdates$1 (react-dom.development.js:21871)
at batchedEventUpdates (react-dom.development.js:795)
at dispatchEventForLegacyPluginEventSystem (react-dom.development.js:3568)
at attemptToDispatchEvent (react-dom.development.js:4267)
at dispatchEvent (react-dom.development.js:4189)
at unstable_runWithPriority (scheduler.development.js:653)
at dispatchUserBlockingUpdate (react-dom.development.js:4172)

感谢任何人的意见，谢谢！

2个回答

通知菜单

return (
            <Dropdown overlay={dropdownmenu} onVisibleChange={this.handleVisibleChange}
              visible={this.state.visible} placement="bottomRight" trigger={['click']}
               overlayStyle={{maxHeight:350,overflowY:'scroll'}}>
            <Button icon={<BellFilled/>} shape="circle"/>
         </Dropdown>
    )

在 NotificationMenu 类中，您尝试删除 . 我以前犯过这个错误。似乎使用 <> 来包含 Menu 会导致错误。

在 NotificationMenu 这个类组件中，你尝试把删除掉。我之前遇到过这个问题，如果使用<>来包含Menu组件就会报错

对我来说，这发生在我使用数据动态生成菜单时。因此，我在较小的函数中循环数据。解决方案是将 props 从根节点 ( <Menu>) 向下传递给它的每个子节点。所以对我来说，这看起来像这样：

    const MenuItem = (props) => {
        const { item, eventKey } = props;
        if (someBoolean) {
            return <Menu.Item key={eventKey} {...props}>{item.title}</Menu.Item>;
        }
        
        return (
            <SubMenu key={eventKey} title={item.title} {...props}>
                { item.children.map((child) =>
                    <Menu.Item key={child.key}  {...props}>{child.title}</Menu.Item>
                )}
            </SubMenu>
        );
    };

请注意{...props}for 每个元素。另请参阅有关此问题的官方主题：https : //github.com/react-component/menu/issues/142#issuecomment-523486281

其它你可能感兴趣的问题

上一篇覆盖 officeUI 导航 V 形图标下一篇Material-UI Button 和 ButtonGroup 未在基线上对齐