NotificationMenu

Question

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

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

NotificationMenu

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;

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

NotificationListRows：

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)

感谢任何人的输入，谢谢！

Answer 1

通知菜单

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这个类组件中，你尝试把删除掉。我之前遇到过这个问题，如果使用<>来包含着菜单组件就会报错

Answer 2

对我来说，这发生在我使用数据动态生成菜单时。因此，我在较小的函数中循环数据。解决方案是将 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}。另请参阅有关此问题的官方帖子：https://github.com/react-component/menu/issues/142#issuecomment-523486281

将鼠标悬停在菜单项上时，antd下拉菜单错误

NotificationMenu

NotificationListRows：

2 个答案: