Ant设计与React，菜单不在移动设备上呈现

Question

我有这个应用程序与AntDesign css框架和侧边栏菜单不会渲染到移动视图中的DOM，例如。 开发人员（刷新后）或手机上的响应式视图。 在桌面上一切都按预期工作。 是什么原因造成的？

您可以在以下网址查看整个应用程序： https ： //github.com/arekrgw/supladevicesinstall

import React, {useState} from 'react'
import {Menu, Icon} from 'antd';
import {Link} from 'react-router-dom'
import history from '../history'
import { connect } from 'react-redux'

const SubMenu = Menu.SubMenu

const SideBar = (props) => {
  const currentSlug = history.location.pathname.split('/')[1] || 'welcome'
  const [current, setCurrent] = useState(currentSlug)

  const renderMenu = () => {
    return props.menu.map((menuItem) => {
      return <Menu.Item key={menuItem.slug}><Link to={`/${menuItem.slug}`}>{menuItem.title}</Link></Menu.Item>
    })
  }
  return (
    <Menu
      theme="dark"
      onClick={(e) => setCurrent(e.key)}
      selectedKeys={[current]}
      mode="inline"
      defaultOpenKeys={['other']}   
    >
      <SubMenu key="other" title={<span><Icon type="home" /><span>Ogólne</span></span>}>
        <Menu.Item key="welcome"><Link to="/">Home</Link></Menu.Item>
        <Menu.Item key="software">Wstęp (ważne)</Menu.Item>
      </SubMenu>
        {/* Render Menu z API i inteligentne uzywanie slugow */ }
        {renderMenu()}

    </Menu>
  )
}

const mapStateToProps = (state) => ({
  menu: state.menu
})

export default connect(mapStateToProps)(SideBar)

import React from 'react'
import { Layout } from 'antd'
import SideBar from './SideBar'
import HeaderStyled from './HeaderStyled'
import {Router, Route} from 'react-router-dom'

import FooterDetails from './FooterDetails'
import history from '../history'
import MainContentRoute from './MainContentRoute'

const { Header, Footer, Sider, Content} = Layout

const App = () => {
  return (
    <Router history={history}>
      <Layout>
        <Header style={{borderBottom: '1px solid #0e2549'}}>
          <HeaderStyled />
        </Header>
        <Layout>
          <Sider collapsedWidth={0} breakpoint="md" width="250px">
            <SideBar />
          </Sider>
          <Content>
            <Route path="/:slug" exact component={MainContentRoute}/>
          </Content>
        </Layout>
        <Footer style={{textAlign: 'center', background: "#ddd"}}>
          <FooterDetails />
        </Footer>

      </Layout>
    </Router>
  )
}

export default App

Answer 1

看起来这种情况正在发生，因为你在这里为Ant的Sider设置一个断点：

<Sider collapsedWidth={0} breakpoint="md" width="250px">
  <SideBar />
</Sider>

我在这里阅读了Ant的文档，它说下面，

您可以通过设置断点来获得响应式布局，当窗口宽度低于断点时， Sider将折叠 到collapsedWidth的宽度。 如果collapsedWidth设置为0，则会出现特殊触发器。

在您的情况下，从992px和更低的开始，Sider组件折叠到0px的collapsedWidth。