在Ant Design中,要使菜单无法折叠/展开,可以通过设置defaultCollapsed
属性为false
来实现。下面是一个包含代码示例的解决方法:
import React from 'react';
import { Layout, Menu } from 'antd';
import { MenuUnfoldOutlined, MenuFoldOutlined } from '@ant-design/icons';
const { Header, Sider, Content } = Layout;
class App extends React.Component {
state = {
collapsed: false, // 初始时菜单不折叠
};
toggle = () => {
this.setState({
collapsed: !this.state.collapsed,
});
};
render() {
return (
{React.createElement(this.state.collapsed ? MenuUnfoldOutlined : MenuFoldOutlined, {
className: 'trigger',
onClick: this.toggle,
})}
{/* 内容区域 */}
);
}
}
export default App;
在上面的代码中,我们使用了defaultCollapsed
属性来设置菜单的初始折叠状态为false
,即不折叠。通过点击trigger
按钮来切换菜单的折叠状态。当菜单折叠时,显示MenuUnfoldOutlined
图标,当菜单展开时,显示MenuFoldOutlined
图标。