React导航栏的拉伸隐藏功能实现

React导航栏的拉伸隐藏功能的实现

这个demo主要用的是ant-design里的库，使用其中的导航栏菜单的库：

import { Menu, Icon } from 'antd';

const SubMenu = Menu.SubMenu;
const MenuItemGroup = Menu.ItemGroup;

class Sider extends React.Component {
  handleClick = (e) => {
    console.log('click ', e);
  }

  render() {
    return (
      
        Navigation One}>
          
            Option 1
            Option 2
          
          
            Option 3
            Option 4
          
        
        Navigation Two}>
          Option 5
          Option 6
          
            Option 7
            Option 8
          
        
        Navigation Three}>
          Option 9
          Option 10
          Option 11
          Option 12
        
      
    );
  }
}

ReactDOM.render(, mountNode);

这个代码能实现导航菜单，但是我想要使用一个按钮控制导航栏的拉伸和隐藏。具体实现是导航栏隐藏其来，设计一个按钮，点了这个按钮，导航栏出现，点其它地方到导航栏隐藏。
我使用了ant-design中的Drawer组件，使用封装好的onClose监听函数，将整个Menu菜单包含在Drawer组件之中，

                ...

处事的closable是false状态，这样导航栏起初是隐藏状态。通过使用按钮的onClick（）监听函数改变visible为true或false将导航栏显示出来。
完整代码：

import React from 'react';
import 'antd/dist/antd.css';
import { Drawer,Icon ,Menu  } from 'antd';

const SubMenu = Menu.SubMenu;
const MenuItemGroup = Menu.ItemGroup;

class App extends React.Component {
  state = { visible: false };

  showDrawer = () => {
    this.setState({
      visible: true,
    });
  };

  onClose = () => {
    this.setState({
      visible: false,
    });
  };
  render () {


    return (
        

              

                
                

                  
                    Navigation One}>
                      
                        Option 1
                        Option 2
                      
                      
                        Option 3
                        Option 4
                      
                    
                    Navigation Two}>
                      Option 5
                      Option 6
                      
                        Option 7
                        Option 8
                      
                    
                    Navigation Three}>
                      Option 9
                      Option 10
                      Option 11
                      Option 12
                    
                  
                
              
        
    )
  }
}
export default App;

将Drawer组件的visible属性存储在整个组件的state当中，起始的visible是false，导航栏是隐藏状态。
通过点击按钮，触发onClick（）监听函数，使得state中的visible变为true，Drawer组件的visible={this.state.visible}由state决定，state中的visible发生变化之后，Drawer组件的visible也发生变化，导航栏出现。
之后点击其它区域时，调用封装好的onClose()函数，再次改变state中的visible属性，实现导航栏的隐藏。
按钮默认的比较丑的按钮，样式可以用CSS进行优化，这个不是重点哈。

Finished~