Layout使用中的一些坑

Demo：

import React, { Component } from 'react';
import { hashHistory, Link } from 'react-router';
import { Layout, Menu, Icon } from 'antd';
import 'antd/dist/antd.css';

const { Header, Sider, Content } = Layout;
const rootSubmenuKeys = ['sub1', 'sub2', 'sub3'];

class SiderDemo extends Component {
  constructor(props) {
    super(props);
    this.state = {
      collapsed: false,//当前Sider收起状态
      openKeys: [''],//当前展开的 SubMenu 菜单项 key 数组
      selectedKeys: [''],//当前选中的菜单项 key 数组
    };
  }

  /**
   * 
   * @param {*} e 被选中时调用
   */
  selectMenu = e => {
    this.setState({selectedKeys: e.selectedKeys});
  }

  /**
   * 
   * @param {*} openKeys SubMenu 展开/关闭的回调
   */
  openSubMenu = openKeys => {
    const { collapsed} = this.state;
    if (collapsed) {
      return false;//因收缩Sider后hover SubMenu还会触发该事件，因此在此判断当前Sider的收缩状态来return false;
    }
    const latestOpenKey = openKeys.find(key => this.state.openKeys.indexOf(key) === -1);
    if (rootSubmenuKeys.indexOf(latestOpenKey) === -1) {
      this.setState({openKeys});
    } else {
      this.setState({
        openKeys: latestOpenKey ? [latestOpenKey] : [],
      });
    }
  }

  /**
   * 
   * Sider收缩控制
   */
  toggle = () => {
    this.setState({
      collapsed: !this.state.collapsed,
    });
  }

  render() {
    const { openKeys, selectedKeys, collapsed } = this.state;
    let defaultProps = collapsed ? {} : { openKeys };//当你展开菜单项，Sider收缩后会显示二级菜单项（PS：收缩Sider后hover SubMenu时会显示该级下的二级菜单，此处是因为openKeys有值，因此会自动显示二级菜单，体验不太好），因此此处用来控制Menu组件的openKeys
    return (
      <Layout>
        <Sider
          trigger={null}
          collapsible
          collapsed={collapsed}
        >
          <div className="logo" />
          <Menu theme="dark" mode="inline" {...defaultProps} style={{width: 200}}/* 加上固定width,缩放Sider的时候可以防抖，明显不卡了！ */ onSelect={(e)=> this.selectMenu(e)} onOpenChange={this.openSubMenu} selectedKeys={selectedKeys}>
            <SubMenu key="sub1" title={<span><Icon type="mail" /><span>Navigation One</span></span>}>
                <Menu.Item key="1">Option 1</Menu.Item>
                <Menu.Item key="2">Option 2</Menu.Item>
                <Menu.Item key="3">Option 3</Menu.Item>
                <Menu.Item key="4">Option 4</Menu.Item>
           </SubMenu>
           <SubMenu key="sub2" title={<span><Icon type="appstore" /><span>Navigation Two</span></span>}>
              <Menu.Item key="5">Option 5</Menu.Item>
              <Menu.Item key="6">Option 6</Menu.Item>
           </SubMenu>
           <SubMenu key="sub3" title={<span><Icon type="setting" /><span>Navigation Three</span></span>}>
              <Menu.Item key="9">Option 9</Menu.Item>
              <Menu.Item key="10">Option 10</Menu.Item>
              <Menu.Item key="11">Option 11</Menu.Item>
              <Menu.Item key="12">Option 12</Menu.Item>
           </SubMenu>
          </Menu>
        </Sider>
        <Layout>
          <Header style={{ background: '#fff', padding: 0 }}>
            <Icon
              className="trigger"
              type={this.state.collapsed ? 'menu-unfold' : 'menu-fold'}
              onClick={this.toggle}
            />
          </Header>
          <Content style={{
            margin: '24px 16px', padding: 24, background: '#fff', minHeight: 280,
          }}
          >
            Content
          </Content>
        </Layout>
      </Layout>
    );
  }
}

ReactDOM.render(<SiderDemo />, mountNode);

因为我们为了缩放Sider时防抖，给其设置了固定width，因此现在收缩后，去hover SubMenu会发现二级菜单的定位会有偏差，这里给其设置固定的left值就好了（ps：根据Sider收缩的宽度去设置就好了）， css如下：

.ant-menu-dark.ant-menu-submenu-popup {
  left: 84px!important;
}
#components-layout-demo-responsive .logo {
  height: 32px;
  background: rgba(255,255,255,.2);
  margin: 16px;
}

在使用过程中发现Menu收缩时（前提是已经展开了二级菜单），二级菜单会自动展开，这是由于设置了openkeys的原因，可以通过判断菜单在收起状态时，给Menu不设置openKeys值，这样就变为不受控组件，交给antd处理。

解决方案：判断菜单是否处于收缩状态设置openkeys

这个问题解决后发现，hover这些收缩后的一级菜单Icon时，会触发onOpenChange，导致openKeys改变，导致当前展开的 SubMenu 菜单项改变。

解决方案：函数内判断收缩状态，若收缩了则直接return false

/**
 * 
 * @param {*} openKeys SubMenu 展开/关闭的回调
 */
openSubMenu = openKeys => {
  const { collapsed} = this.state;
  if (collapsed) {
    return false;//因收缩Sider后hover SubMenu还会触发该事件，因此在此判断当前Sider的收缩状态来return false;
  }
  const latestOpenKey = openKeys.find(key => this.state.openKeys.indexOf(key) === -1);
  if (rootSubmenuKeys.indexOf(latestOpenKey) === -1) {
    this.setState({openKeys});
  } else {
    this.setState({
      openKeys: latestOpenKey ? [latestOpenKey] : [],
    });
  }
}

const { openKeys } = this.state;
let defaultProps = collapsed ? {} : { openKeys };

 <Menu theme="dark" mode="inline" {...defaultProps} style={{width: 200}}/* 加上固定width,缩放Sider的时候可以防抖，明显不卡了！ */ onSelect={(e)=> this.selectMenu(e)} onOpenChange={this.openSubMenu} selectedKeys={selectedKeys}>
  <SubMenu key="sub1" title={<span><Icon type="mail" /><span>Navigation One</span></span>}>
    <Menu.Item key="1">Option 1</Menu.Item>
    <Menu.Item key="2">Option 2</Menu.Item>
    <Menu.Item key="3">Option 3</Menu.Item>
    <Menu.Item key="4">Option 4</Menu.Item>
  </SubMenu>
  <SubMenu key="sub2" title={<span><Icon type="appstore" /><span>Navigation Two</span></span>}>
    <Menu.Item key="5">Option 5</Menu.Item>
    <Menu.Item key="6">Option 6</Menu.Item>
  </SubMenu>
  <SubMenu key="sub3" title={<span><Icon type="setting" /><span>Navigation Three</span></span>}>
    <Menu.Item key="9">Option 9</Menu.Item>
    <Menu.Item key="10">Option 10</Menu.Item>
    <Menu.Item key="11">Option 11</Menu.Item>
    <Menu.Item key="12">Option 12</Menu.Item>
  </SubMenu>
 </Menu>

使用antD遇到的坑（一）

使用antD遇到的坑（一）

Layout使用中的一些坑