时间戳

首页 > 解决方案 > 将鼠标悬停在菜单项上时出现 Antd 下拉菜单错误

reactjs - 将鼠标悬停在菜单项上时出现 Antd 下拉菜单错误

问题描述

我最近在我的 react 项目中使用了 antd 样式包。但是，我面临的问题与此处github中提出的问题类似。

但是，我无法翻译他们为我的项目提供的解决方案。这是我的代码：

通知菜单

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)

不胜感激任何人的意见，谢谢！

标签： reactjsantd

解决方案

通知菜单

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 这个类组件中，你尝试把这个问题。

推荐阅读