React AntDesign 内容被推到一边
Posted
技术标签:
【中文标题】React AntDesign 内容被推到一边【英文标题】：React AntDesign Content pushed to the side 【发布时间】：2021-12-15 19:31:42 【问题描述】：当我在我的代码中添加一个大时间轴时，布局会中断，并且右侧会出现一个边距。我真的不知道是什么原因造成的，它只会在添加时间线时中断，尝试在 chromes inspect 上调试但没有成功。
您知道是什么原因造成的吗？
我是 react 和 antdesign 的新手。
多伦多证券交易所
const Dashboard = withRouter((props: any) =>
const [menuCollapsed, setMenuCollapsed] = useState(false)
const authenticated = useContext(Context);
const theme, changeTheme = useContext(ThemeContext);
const onCollapse = (collapsed: boolean) =>
setMenuCollapsed(collapsed);
;
const toggleTheme = (active: boolean) =>
changeTheme(active ? "dark" : "light");
const menuItemOnSelect = (res: any) =>
history.push(`$res.keyPath[1]$res.keyPath[0]`);
const location = props;
const locations = location.pathname.split("/").filter((i: string) => i);
useEffect(() => breadcrumbItems(), []);
const breadcrumbItems = () =>
return locations.map((l: string) =>
const breadcrumSettings = Constants.breadcrumbNames[l];
if (breadcrumSettings && breadcrumSettings[1])
const url = location.pathname;
return (
<Breadcrumb.Item key=`breadcrumb-$breadcrumSettings[0]`>
<Link> breadcrumSettings[0] </Link>
</Breadcrumb.Item>
)
)
return (
<Layout hasSider style= minHeight: '100vh' >
<Sider theme=theme collapsible collapsed=menuCollapsed onCollapse=onCollapse>
<div className=theme === "dark" ? "logo-container logo-container-dark" : "logo-container logo-container-light">
<Link onClick=() => history.push(Constants.paths.dashboard)>
menuCollapsed ?
<img style= height: "34px" src=theme === "dark" ? "/logo-no-text-dark.png" : "/logo-no-text.png" />
:
<img id="logo" src=theme === "dark" ? "/logo-sideways-dark.png" : "/logo-sideways.png" />
</Link>
</div>
<Menu theme=theme defaultSelectedKeys=['1'] mode="inline" onSelect=menuItemOnSelect>
<SubMenu key="/dashboard/dimp" icon=<FileTextOutlined /> title="DIMP">
<Menu.Item key="/mensal">Mensal</Menu.Item>
<Menu.Item key="/retificadora">Refiticadora</Menu.Item>
</SubMenu>
<SubMenu key="sub2" icon=<FileOutlined /> title="DOC">
<Menu.Item key="3">Mensal</Menu.Item>
</SubMenu>
<SubMenu key="sub3" icon=<CodeOutlined /> title="Admin">
<Menu.Item key="4">Parâmetros</Menu.Item>
<Menu.Item key="5">Agendamentos</Menu.Item>
<Menu.Item key="6">Features</Menu.Item>
</SubMenu>
</Menu>
</Sider>
<Layout style= backgroundColor: "green"
// className=theme !== "dark" ? "content-container-light" : "content-container-dark"
>
<Header className=theme === "dark" ? "header header-dark" : "header header-light">
<Switch
checkedChildren=<FiMoon fill="white"/>
unCheckedChildren=<FiSun fill="white"/>
defaultChecked=theme === "dark"
onChange=toggleTheme
/>
<Dropdown
overlay=
<Menu>
<Menu.Item icon=<LogoutOutlined />>
Sair
</Menu.Item>
</Menu>
placement="bottomCenter"
>
<Avatar className="dashboard-header-avatar">
BM
</Avatar>
</Dropdown>
</Header>
<Content style=backgroundColor: "blue" >
/* <Content> */
<Breadcrumb>
[<Breadcrumb.Item>Dashboard</Breadcrumb.Item>, ...breadcrumbItems()]
</Breadcrumb>
<Title level=4 style= marginTop: "15px", marginBottom: "30px" >
locations.map((l: string) =>
const breadcrumSettings = Constants.breadcrumbNames[l];
if (breadcrumSettings) return breadcrumSettings[0];
).join(" ")
</Title>
<Timeline>
<Timeline.Item color="green">DIMP Outubro finalizada</Timeline.Item>
<Timeline.Item dot=<CodeOutlined style= fontSize: '16px' />>
23/11/2021: Fase <Text italic > Geração das origens concluída</Text> concluída
</Timeline.Item>
<Timeline.Item>23/11/2021: Geração dos informes DIMP iniciada</Timeline.Item>
<Timeline.Item dot=<CodeOutlined style= fontSize: '16px' />>
17/11/2021: Fase <Text italic > Envio das Origens</Text> concluída
</Timeline.Item>
<Timeline.Item>17/11/2021: Remessa completa recebida (EV8)</Timeline.Item>
<Timeline.Item color="red">15/11/2021: Remessa inconsistente recebida (EV8)</Timeline.Item>
<Timeline.Item>13/11/2021: Remessa completa recebida (BS1)</Timeline.Item>
<Timeline.Item color="red">12/11/2021: Remessa inconsistente recebida (BS1)</Timeline.Item>
<Timeline.Item color="red">12/11/2021: Remessa inconsistente recebida (EV8)</Timeline.Item>
<Timeline.Item color="red">10/11/2021: Remessa inconsistente recebida (EV8)</Timeline.Item>
<Timeline.Item>05/11/2021: Remessa completa recebida (MY1)</Timeline.Item>
<Timeline.Item>05/11/2021: Remessa completa recebida (UR1)</Timeline.Item>
<Timeline.Item>01/11/2021: Processo DIMP mensal inicidado</Timeline.Item>
<Timeline.Item>01/11/2021: Processo DIMP mensal inicidado</Timeline.Item>
<Timeline.Item>01/11/2021: Processo DIMP mensal inicidado</Timeline.Item>
<Timeline.Item>01/11/2021: Processo DIMP mensal inicidado</Timeline.Item>
<Timeline.Item>01/11/2021: Processo DIMP mensal inicidado</Timeline.Item>
<Timeline.Item>01/11/2021: Processo DIMP mensal inicidado</Timeline.Item>
<Timeline.Item>01/11/2021: Processo DIMP mensal inicidado</Timeline.Item>
<Timeline.Item>01/11/2021: Processo DIMP mensal inicidado</Timeline.Item>
<Timeline.Item>01/11/2021: Processo DIMP mensal inicidado</Timeline.Item>
<Timeline.Item>01/11/2021: Processo DIMP mensal inicidado</Timeline.Item>
<Timeline.Item>01/11/2021: Processo DIMP mensal inicidado</Timeline.Item>
<Timeline.Item>01/11/2021: Processo DIMP mensal inicidado</Timeline.Item>
<Timeline.Item>01/11/2021: Processo DIMP mensal inicidado</Timeline.Item>
<Timeline.Item>01/11/2021: Processo DIMP mensal inicidado</Timeline.Item>
<Timeline.Item>01/11/2021: Processo DIMP mensal inicidado</Timeline.Item>
<Timeline.Item>01/11/2021: Processo DIMP mensal inicidado</Timeline.Item>
<Timeline.Item>01/11/2021: Processo DIMP mensal inicidado</Timeline.Item>
<Timeline.Item>01/11/2021: Processo DIMP mensal inicidado</Timeline.Item>
<Timeline.Item>01/11/2021: Processo DIMP mensal inicidado</Timeline.Item>
<Timeline.Item>01/11/2021: Processo DIMP mensal inicidado</Timeline.Item>
<Timeline.Item>01/11/2021: Processo DIMP mensal inicidado</Timeline.Item>
<Timeline.Item>01/11/2021: Processo DIMP mensal inicidado</Timeline.Item>
<Timeline.Item>01/11/2021: Processo DIMP mensal inicidado</Timeline.Item>
<Timeline.Item>01/11/2021: Processo DIMP mensal inicidado</Timeline.Item>
<Timeline.Item>01/11/2021: Processo DIMP mensal inicidado</Timeline.Item>
<Timeline.Item>01/11/2021: Processo DIMP mensal inicidado</Timeline.Item>
<Timeline.Item>01/11/2021: Processo DIMP mensal inicidado</Timeline.Item>
<Timeline.Item>01/11/2021: Processo DIMP mensal inicidado</Timeline.Item>
<Timeline.Item>01/11/2021: Processo DIMP mensal inicidado</Timeline.Item>
<Timeline.Item>01/11/2021: Processo DIMP mensal inicidado</Timeline.Item>
<Timeline.Item>01/11/2021: Processo DIMP mensal inicidado</Timeline.Item>
<Timeline.Item>01/11/2021: Processo DIMP mensal inicidado</Timeline.Item>
</Timeline>
</Content>
/* </Content> */
</Layout>
</Layout>
);
);
SCSS
.logo-container
display: flex;
align-items: center;
justify-content: center;
height: 55px;
&-light
background-color: white;
border-bottom: 1px solid #F0F0F0;
&-dark
border-bottom: 1px solid #66737f;
.header
height: 55px;
align-items: center;
justify-content: right;
display: flex;
&-light
background-color: white;
border-bottom: 1px solid #F0F0F0;
&-dark
border-bottom: 1px solid #66737f;
#logo
height: 50px;
.content-container-light
// background-color: white;
padding: 0;
height: 100vh;
width: 100vw;
.content-container-dark
background-color: #3e4756;
padding: 0;
height: "100%"
.dashboard-content
margin-top: 30px;
display: flex;
.dashboard-content-container
background-color: blue;
// margin: 20px 40px;
.dashboard-header-avatar
cursor: pointer;
margin-left: 20px;
【问题讨论】：
【参考方案1】：知道了！
我的 App 组件顶部有一个包装器，具有以下属性：
ReactDOM.render(
<React.StrictMode>
<div id='main-container'>
<App/>
</div>
</React.StrictMode>,
document.getElementById('root')
);
#main-container
height: 100vh;
width: 100vw;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
【讨论】：
以上是关于React AntDesign 内容被推到一边的主要内容，如果未能解决你的问题，请参考以下文章
android片段-当另一个片段被推到它上面时如何保存片段中的视图状态
为啥即使另一个活动在顶部，launchMode="singleTask" 的启动器活动总是被推到后台堆栈的顶部？ [复制]