[英]antd react get different displays
Having a antd
with react
, consider two options to render the Sider
part. 有一个
antd
有react
,可考虑两种选择来呈现Sider
一部分。
Option 1: Create CustomSider: 选项1:创建CustomSider:
import React from 'react';
import styles from './CustomSider.css';
import { Layout, Menu } from 'antd'
import { Link } from 'dva/router'
const CustomSider = () => {
return (
<Layout.Sider>
<Menu mode="inline" theme="dark">
<Menu.SubMenu title="Menu">
<Menu.Item>Submenu</Menu.Item>
</Menu.SubMenu>
</Menu>
</Layout.Sider>
);
}
export default CustomSider;
and use the CustomSider as: 并将CustomSider用作:
<BrowserRouter>
<Layout>
<Layout>
<CustomSider/>
</Layout>
</Layout>
<Content>
about
</Content>
</BrowserRouter>
In this case, the page is rendered as following: 在这种情况下,页面呈现如下:
Option 2: Render the Sider
directly 选项2:直接渲染
Sider
<BrowserRouter>
<Layout>
<Layout>
<Layout.Sider>
<Menu mode="inline" theme="dark">
<Menu.SubMenu title="Menu">
<Menu.Item>Submenu</Menu.Item>
</Menu.SubMenu>
</Menu>
</Layout.Sider>
</Layout>
</Layout>
<Content>
about
</Content>
</BrowserRouter>
Then the output is: 然后输出是:
I know that Option 2 renders the page as intended. 我知道选项2可以按预期呈现页面。 But what causes the difference?
但是,造成差异的原因是什么? And if I insist using Option 1 , how can I render the page as Option 2 .
如果我坚持使用选项1 ,那么如何将页面呈现为选项2 。
您可以尝试用Layout
包装Layout.Sider
并减少路由器中的一个Layout。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.