это код, который выдает ошибку. Mountnode не определен и TypeError: Невозможно уничтожить свойство Header из 'undefined' или 'null'. и IDK, будет ли этот код работать, это моя панель администратора, дайте мне предложения или правильный способ использовать ANTD в ответ заранее спасибо: https://codepen.io/pen/
import React, { Component } from 'react'
import './CssFiles/Admin.css'
import 'react-icons'
import ReactDOM from 'react-dom';
const { Layout, Menu, Breadcrumb } = 'antd'
const {
DesktopOutlined,
PieChartOutlined,
FileOutlined,
TeamOutlined,
UserOutlined
} = 'icons'
const { Header, Content, Footer, Sider } = Layout;
const { SubMenu } = Menu;
class AdminDashboard extends React.Component {
state = {
collapsed: false
};
onCollapse = (collapsed) => {
console.log(collapsed);
this.setState({ collapsed });
};
render() {
return (
<>
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>
<meta name="theme-color" content="#000000"/>
</head>
<body>
<div id="container" style="padding: 24px" />
<script>var mountNode = document.getElementById('container');</script>
</body>
</html>
<Layout style={{ minHeight: "100vh" }}>
<Sider
collapsible
collapsed={this.state.collapsed}
onCollapse={this.onCollapse}
>
<div className="logo" />
<Menu theme="dark" defaultSelectedKeys={["1"]} mode="inline">
<Menu.Item key="1">
<PieChartOutlined />
<span>Option 1</span>
</Menu.Item>
<Menu.Item key="2">
<DesktopOutlined />
<span>Option 2</span>
</Menu.Item>
<SubMenu
key="sub1"
title={
<span>
<UserOutlined />
<span>User</span>
</span>
}
>
<Menu.Item key="3">Tom</Menu.Item>
<Menu.Item key="4">Bill</Menu.Item>
<Menu.Item key="5">Alex</Menu.Item>
</SubMenu>
<SubMenu
key="sub2"
title={
<span>
<TeamOutlined />
<span>Team</span>
</span>
}
>
<Menu.Item key="6">Team 1</Menu.Item>
<Menu.Item key="8">Team 2</Menu.Item>
</SubMenu>
<Menu.Item key="9">
<FileOutlined />
</Menu.Item>
</Menu>
</Sider>
<Layout className="site-layout">
<Header className="site-layout-background" style={{ padding: 0 }} />
<Content style={{ margin: "0 16px" }}>
<Breadcrumb style={{ margin: "16px 0" }}>
<Breadcrumb.Item>User</Breadcrumb.Item>
<Breadcrumb.Item>Bill</Breadcrumb.Item>
</Breadcrumb>
<div
className="site-layout-background"
style={{ padding: 24, minHeight: 360 }}
>
Bill is a cat.
</div>
</Content>
<Footer style={{ textAlign: "center" }}>
Ant Design ©2018 Created by Ant UED
</Footer>
</Layout>
</Layout>
</>
);
}
}
export default AdminDashboard
ReactDOM.render(<AdminDashboard />, mountNode);