Layout

Version

2.10.1

Environment

mac os chrome 50

Reproduction link

https://codepen.io/accounts/signup/user/free

Steps to reproduce

我发现Layout组件下，如果嵌套了<Sider/>组件时，如果是把Sider抽取出来作为单独的组件。如：

import React from 'react';

import { Layout, Menu, Icon } from 'antd';
const { SubMenu } = Menu;
const { Sider } = Layout;

export default () => {
  return <Sider width={200} style={{ background: '#fff' }}>
    <Menu
      mode="inline"
      defaultSelectedKeys={[ '1' ]}
      defaultOpenKeys={[ 'sub1' ]}
      style={{ height: '100%' }}
    >
      <SubMenu key="sub1" title={<span><Icon type="user"/>subnav 1</span>}>
        <Menu.Item key="1">option1</Menu.Item>
        <Menu.Item key="2">option2</Menu.Item>
        <Menu.Item key="3">option3</Menu.Item>
        <Menu.Item key="4">option4</Menu.Item>
      </SubMenu>
      <SubMenu key="sub2" title={<span><Icon type="laptop"/>subnav 2</span>}>
        <Menu.Item key="5">option5</Menu.Item>
        <Menu.Item key="6">option6</Menu.Item>
        <Menu.Item key="7">option7</Menu.Item>
        <Menu.Item key="8">option8</Menu.Item>
      </SubMenu>
      <SubMenu key="sub3" title={<span><Icon type="notification"/>subnav 3</span>}>
        <Menu.Item key="9">option9</Menu.Item>
        <Menu.Item key="10">option10</Menu.Item>
        <Menu.Item key="11">option11</Menu.Item>
        <Menu.Item key="12">option12</Menu.Item>
      </SubMenu>
    </Menu>
  </Sider>;
}

在放到Layout组件中，布局会出现问题。

import React from 'react';
import { Layout, Menu, Breadcrumb, Icon } from 'antd';
const { SubMenu } = Menu;
const { Header, Content, Sider } = Layout;
import Silder from '../components/Sider';
export default () =>
  <Layout>
    <Header className="header">
      <div className="logo"/>
      <Menu
        theme="dark"
        mode="horizontal"
        defaultSelectedKeys={[ '2' ]}
        style={{ lineHeight: '64px' }}
      >
        <Menu.Item key="1">nav 1</Menu.Item>
        <Menu.Item key="2">nav 2</Menu.Item>
        <Menu.Item key="3">nav 3</Menu.Item>
      </Menu>
    </Header>
    <Layout className="">
      <Silder></Silder>


      <Layout style={{ padding: '0 24px 24px' }}>
        <Breadcrumb style={{ margin: '12px 0' }}>
          <Breadcrumb.Item>Home</Breadcrumb.Item>
          <Breadcrumb.Item>List</Breadcrumb.Item>
          <Breadcrumb.Item>App</Breadcrumb.Item>
        </Breadcrumb>
        <Content style={{ background: '#fff', padding: 24, margin: 0, minHeight: 280 }}>
          Content
        </Content>
      </Layout>
    </Layout>
  </Layout>

布局会出现问题，看了源码，是这里有做了处理

class Basic extends React.Component<BasicProps, any> {
  render() {
    const { prefixCls, className, children, ...others } = this.props;
    let hasSider;
    React.Children.forEach(children, (element: any) => {
      if (element && element.type && element.type.__ANT_LAYOUT_SIDER) {
        hasSider = true;
      }
    });
    const divCls = classNames(className, prefixCls, {
      [`${prefixCls}-has-sider`]: hasSider,
    });
    return (
      <div className={divCls} {...others}>{children}</div>
    );
  }
}

临时的解决办法实在父容器里，加上className -> ant-layout-has-sider. 建议，要么Layout上开发一个属性给用户指定。 或是，自动进行多层识别，但是可能会性能方面的考虑。

What is expected?

布局正确

What is actually happening?

Content的内容跑到底部去了 临时的解决办法实在父容器里，加上className -> ant-layout-has-sider.

---

临时的解决办法实在父容器里，加上className -> ant-layout-has-sider. codepen 注册不了，问题大概就是这样。

[zenjava]

const CustomizedSider = (props) => <Sider {…props} /> CustomizedSider.__ANT_LAYOUT_SIDER = true; … <CustomizedSider>Sider Content</CustomizedSider> 没注意看到这个。

[JunyuanZheng]

请问typescript怎么处理这种情况？