如何在 React 项目中实现 Antd 设计答案

【问题标题】：How to Implement Antd design in react project如何在 React 项目中实现 Antd 设计
【发布时间】：2020-04-07 19:40:34
【问题描述】：

这是出现错误的代码 Mountnode is undefined and TypeError: Cannot destructure property Header of 'undefined' or 'null'。并且知道这段代码是否有效这是我的管理仪表板，给我建议或正确使用 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);

【问题讨论】：

标签： javascript reactjs antd

【解决方案1】：

尝试使用类似的东西

import { Layout, Menu, Breadcrumb } from 'antd'

【讨论】：

是的，甚至可以根据您所说的更改图标，但我现在收到错误，因为目标容器不是 DOM 元素。
要么是从库导入错误，要么是从“antd”导入错误。检查您的“菜单”导入。我认为您可能缺少“菜单”的导入。