当前位置： 移动技术网 > IT编程>网页制作>CSS > antd 菜单组件 使用时报错：Cannot read property ‘isRootMenu‘ of undefined

antd 菜单组件 使用时报错：Cannot read property ‘isRootMenu‘ of undefined

2020年07月17日  | 移动技术网IT编程  | 我要评论

项目中使用了antd ui框架，在使用Menu组件得SubMenu组件时报出以下错误：

Uncaught TypeError: Cannot read property 'isRootMenu' of undefined

在这里插入图片描述

解决方案

1 在组件SubMenu上解构props

renderItems(items: Array<any>) {
      return  (items || []).map((item: any) => {
            if (item.children) {
                return (
                    <SubMenu {...this.props} key={item.key} icon={<MailOutlined />} title={item.name}> 
                        {this.renderItems(item.children)}
                    </SubMenu>
                )
            }
            else {
                return (
                    <Item key={item.key} icon={<PieChartOutlined />}>
                        {item.name}
                    </Item>)
            }
        })
    }

2 使用函数组件并直接放在

组件内（不可包含其它标签，<React.Fragment> 也不行）

export default class MenuS extends Component<any> {

   
    render() {
        let { items } = this.props;
        console.log(this.props)
        return (
            <Menu theme="dark" mode="inline" defaultSelectedKeys={['home']}>
                {
                   (items || []).map((item: any) => {
            if (item.children) {
                return (
                    <SubMenu key={item.key} icon={<MailOutlined />} title={item.name}>
                        {item.children.map((i: any) => (<Item key={i.key} icon={<PieChartOutlined />}>
                            {i.name}
                        </Item>))} 
                    </SubMenu>
                )
            }
            else {
                return (
                    <Item key={item.key} icon={<PieChartOutlined />}>
                        {item.name}
                    </Item>)
            }
        })
                }
            </Menu>)
    }
}

本文地址：https://blog.csdn.net/caperxi/article/details/107381234

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网