<menu>组件

Question

我使用Sider组件，菜单里面有一些子菜单。

当我的组件是静态的，意味着没有插入redux，只是一个普通的组件，Menu /＆gt;它的孩子按预期工作。

但是，在我的情况下，我试图让我的菜单动态，所以实际上我的组件使用Redux连接到商店，并使用mapStateToProps生成所有链接，然后连接＆＃39;。

当我在Redux中使用我的组件时，由于某种原因，菜单无法按预期工作。问题归结为ANTD没有删除类，ant-menu-inline-collapsed，这基本上使我的菜单即使在展开时也不显示任何文本。

为了比较当前行为与预期，我发现在代码上生成的ONE差异基本上是创建问题

当前

封闭边：

<div class="ant-layout-sider ant-layout-sider-collapsed" style="..."> 
   <div class="ant-layout-sider-children">
      <ul class="ant-menu ant-menu-dark ant-menu-inline-collapsed ant-menu-root ant-menu-vertical" role="menu" ...>

已打开：

<div class="ant-layout ant-layout-has-sider"><div class="ant-layout-sider" style="...">
   <div class="ant-layout-sider-children">
      <ul class="ant-menu ant-menu-dark **ant-menu-inline-collapsed** ant-menu-root ant-menu-vertical" role="menu">

这里的问题是侧面打开，菜单UL保持 ant-menu-inline-collapsed 类。实际上它应该将其切换为 ant-menu-inline 。

我无法理解为什么会这样。只要我从组件中删除了redux逻辑，菜单行为就可以正常工作，并且有问题的类被删除。

我把redux逻辑重新放入的时刻，由于某种原因，ANTD不会删除所述类。

我迷失了如何继续。

菜单配置是标准配置，据我所知，它根本不应受到影响。

这是我的菜单代码，如果你想快速浏览一下：

<Menu
            onClick={this.handleClick}
            theme="dark"
            mode="inline"
            defaultSelectedKeys={['1']}
            selectedKeys={[this.state.current]}>
            <Menu.Item key={ROUTE_DASHBOARD}>
                <Tooltip placement="right">
                    <Link to={ROUTE_DASHBOARD}>
                        <Icon type="calendar" />
                        <span className="nav-text">Home</span>
                    </Link>
                </Tooltip>
            </Menu.Item>

            <SubMenu
                key='sub2'
                disabled={!budgetView}
                title={<span><Icon type="mail" /><span>Top Down</span></span>}>
                    <Menu.Item key="3">
                        <Link to={`${ROUTE_BUDGET}/SS/budget/${budgetId}/version/${versionName}/${versionId}/exec`}>
                            <Icon type="calendar" />
                            <span className="nav-text">Exec Recap</span>
                        </Link>
                    </Menu.Item>
                    <Menu.Item key="4">
                        <Link to={`${ROUTE_BUDGET}/SS/budget/${budgetId}/version/${versionName}/${versionId}/total`}>
                            <Icon type="calendar" />
                            <span className="nav-text">Total</span>
                        </Link>
                    </Menu.Item>
                    <Menu.Item key="5">
                        <Link to={`${ROUTE_BUDGET}/SS/budget/${budgetId}/version/${versionName}/${versionId}/women`}>
                            <Icon type="calendar" />
                            <span className="nav-text">Women</span>
                        </Link>
                    </Menu.Item>
                    <Menu.Item key="6">
                        <Link to={`${ROUTE_BUDGET}/SS/budget/${budgetId}/version/${versionName}/${versionId}/men`}>
                            <Icon type="calendar" />
                            <span className="nav-text">Men</span>
                        </Link>
                    </Menu.Item>
            </SubMenu>
            <SubMenu
                key="sub7"
                title={<span><Icon type="team" /><span>Middle Out</span></span>}>
                <Menu.Item key="3">Option 3</Menu.Item>
                <Menu.Item key="4">Option 4</Menu.Item>
            </SubMenu>
            <SubMenu
                key="sub3"
                title={<span><Icon type="file" /><span>Bottom Up</span></span>}
              >
                <Menu.Item key="3">Buttom Up 1</Menu.Item>
                <Menu.Item key="4">Buttom Up 2</Menu.Item>
                <Menu.Item key="5">Buttom Up 3</Menu.Item>
            </SubMenu>

            <SubMenu
                key="sub4"
                title={<span><Icon type="area-chart" /><span>Reporting</span></span>}>
                <Menu.Item key="3">Reporting-1</Menu.Item>
                <Menu.Item key="4">Reporting-2</Menu.Item>
                <Menu.Item key="5">Reporting-3</Menu.Item>
            </SubMenu>
        </Menu>