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收起狀態(tài)
      openKeys: [''],//當前展開的 SubMenu 菜單項 key 數(shù)組
      selectedKeys: [''],//當前選中的菜單項 key 數(shù)組
    };
  }

  /**
   * 
   * @param {*} e 被選中時調(diào)用
   */
  selectMenu = e => {
    this.setState({selectedKeys: e.selectedKeys});
  }

  /**
   * 
   * @param {*} openKeys SubMenu 展開/關(guān)閉的回調(diào)
   */
  openSubMenu = openKeys => {
    const { collapsed} = this.state;
    if (collapsed) {
      return false;//因收縮Sider后hover SubMenu還會觸發(fā)該事件昆汹，因此在此判斷當前Sider的收縮狀態(tài)來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);

因為我們?yōu)榱丝s放Sider時防抖贤旷，給其設(shè)置了固定width，因此現(xiàn)在收縮后幼驶，去hover SubMenu會發(fā)現(xiàn)二級菜單的定位會有偏差，這里給其設(shè)置固定的left值就好了（ps：根據(jù)Sider收縮的寬度去設(shè)置就好了）购桑， 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;
}

在使用過程中發(fā)現(xiàn)Menu收縮時（前提是已經(jīng)展開了二級菜單）氏淑，二級菜單會自動展開勃蜘，這是由于設(shè)置了openkeys的原因假残，可以通過判斷菜單在收起狀態(tài)時，給Menu不設(shè)置openKeys值阳惹，這樣就變?yōu)椴皇芸亟M件耗帕，交給antd處理。

解決方案：判斷菜單是否處于收縮狀態(tài)設(shè)置openkeys

這個問題解決后發(fā)現(xiàn)仿便，hover這些收縮后的一級菜單Icon時，會觸發(fā)onOpenChange嗽仪，導(dǎo)致openKeys改變，導(dǎo)致當前展開的 SubMenu 菜單項改變沽翔。

解決方案：函數(shù)內(nèi)判斷收縮狀態(tài)窿凤，若收縮了則直接return false

/**
 * 
 * @param {*} openKeys SubMenu 展開/關(guān)閉的回調(diào)
 */
openSubMenu = openKeys => {
  const { collapsed} = this.state;
  if (collapsed) {
    return false;//因收縮Sider后hover SubMenu還會觸發(fā)該事件，因此在此判斷當前Sider的收縮狀態(tài)來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使用中的一些坑