Antd布局组件不能很好地使用SSR

Question

我开始使用Antd with react-starter-kit来构建管理模板

如果我禁用javascript，我会收到此

但是如果启用了js，我会得到正确的

当第一次加载页面时，它会从1快速加速到2（启用js）

这是反应成分

class Layout extends React.Component {
  static propTypes = {
    children: PropTypes.node.isRequired
  };

  constructor(props) {
    super(props);
    this.state = {
      siderFold: false
    };
    this.switchSider = this.switchSider.bind(this);
  }

  switchSider() {
    this.setState({
      siderFold: !this.state.siderFold
    });
  }

  render() {
    return (
      <div>
        <AntDLayout>
          <AntDLayout.Sider
            className={s.sider}
            trigger={null}
            collapsible
            collapsed={this.state.siderFold}
          >
            <Sidebar siderFold={this.state.siderFold} />
          </AntDLayout.Sider>
          <AntDLayout className={s.layout}>
            <Header
              siderFold={this.state.siderFold}
              switchSider={this.switchSider}
            />
            <AntDLayout.Content>{this.props.children}</AntDLayout.Content>
          </AntDLayout>
        </AntDLayout>
      </div>
    );
  }
}

我尝试为.ant-layout class

禁用这些样式

display: -webkit-box; 
display: -webkit-flex; 
display: -ms-flexbox;
display: flex;

我得到第一张图片的结果，所以我猜它与SSR上的flex有关 对此有何帮助？

Answer 1

只需添加hasSider属性和最新版本的antd即可解决。

示例：

之前：

<AntDLayout>
    // other components.
</AntDLayout>

之后：

<AntDLayout hasSider>
    // other components.
</AntDLayout>

查看有关完全相同的内容的问题：https://github.com/ant-design/ant-design/issues/8604