How to use the antd.Menu.SubMenu function in antd

/* eslint-disable no-console,react/no-multi-comp */
import { Icon, Menu } from 'antd';
import * as React from 'react';
import * as ReactDom from 'react-dom';

import Drawer from '../src/';

import 'antd/lib/menu/style';
import 'antd/lib/style';


import '../assets/index.less';
import './assets/index.less';

const SubMenu = Menu.SubMenu;
const MenuItemGroup = Menu.ItemGroup;
class Demo extends React.Component {
  public state = {
    open: false,
  }

  public onSwitch = () => {
    const { open } = this.state;
    this.setState({
      open: !open,
    });
  }

  public render() {
    return (
      <div></div>

import './index.css';
import React from 'react';
import { Layout, Menu, Breadcrumb, Icon } from 'antd';
const { Header, Content, Footer, Sider } = Layout;
const SubMenu = Menu.SubMenu;

class SiderDemo extends React.Component {
  state = {
    collapsed: false,
  };
  onCollapse = (collapsed) => {
    console.log(collapsed);
    this.setState({ collapsed });
  }
  render() {
    return (

'use strict';

var React = require('react');
var ReactRouter = require('react-router');
var antd = require('antd');
var Link = require('react-router').Link;
let {Menu, Icon, Popover, Card, Modal, Collapse, Button, Tag, Row, Col, message, Tooltip} = require('antd');
const SubMenu = Menu.SubMenu;
const confirm = Modal.confirm;
const Panel = Collapse.Panel;
let User = require("../../../services/user");
const URL = require("url");
import { ReactContext } from 'react-router';
const connect = require('react-redux').connect;
const classnames = require('classnames');
const ORIGIN_TOKEN = '***honeycomb-default-token***';

function versionCompare(v1, v2) {
  v1 = v1.replace(/_/g, '.');
  v2 = v2.replace(/_/g, '.');
  const aVer = v1.split('.');
  const bVer = v2.split('.');

  for (let i = 0; i < 3; i++) {

var renderGateway = function (_a, _b) {
    var _c = _a === void 0 ? {} : _a, auth = _c.auth, pathname = _c.pathname, collectionList = _c.collectionList, query = _c.query;
    var _d = _b === void 0 ? {} : _b, binding = _d.binding, bindingId = _d.bindingId;
    if (!auth.user) {
        return null;
    }
    var deviceWidth = query['@deviceWidth'];
    var isEditPage = query['@page'] !== undefined;
    var hasBinding = binding && binding.type;
    return (React.createElement(Gateway, { into: "quick" },
        React.createElement(Menu.SubMenu, { title: React.createElement(Button, { type: "primary" },
                React.createElement(Icon, { type: "plus", style: { marginRight: 0 } })) },
            React.createElement(Menu.Item, { key: "page-plus" },
                React.createElement(Link, { to: {
                        pathname: pathname,
                        query: __assign({}, query, { '@page': 'new' }),
                    } },
                    React.createElement(Icon, { type: "plus", style: { marginRight: 0 } }),
                    " Seite")),
            collectionList.map(function (collection) {
                return React.createElement(Menu.Item, { key: "@" + collection.name.toLowerCase() },
                    React.createElement(Link, { to: {
                            query: (_a = {},
                                _a["@" + collection.name.toLowerCase()] = null,
                                _a),
                        } },
                        React.createElement(Icon, { type: "plus", style: { marginRight: 0 } }),

import React from 'react';
import { Icon, Menu, Dropdown } from 'antd';
import { config, ajax, signOut } from '../../utils/lib.js'
import './index.less';

const SubMenu = Menu.SubMenu;

const Header = React.createClass({
  signOut(){
    ajax({
      url:config.user.signOut
    })
  },
  render() {
    return (
      <div>
        <menu mode="horizontal">
          {this.props.userName}}&gt;
            
              <a>注销</a>
            
          </menu></div>

import React from 'react';
import { Link } from 'react-router';
import { Menu, Icon } from 'antd';
import style from '../styles/home-layout.less';

const SubMenu = Menu.SubMenu;
const MenuItem = Menu.Item;

class HomeLayout extends React.Component {
  render () {
    const {children} = this.props;
    return (
      <div>
        <header>
          ReactManager
        </header>

        <main>
          <div>
            <menu style="{{width:" mode="inline">
              <span>用户管理</span>}&gt;
                <menuitem></menuitem></menu></div></main></div>

import React from 'react';
import { Menu, Dropdown, Icon } from 'antd';
const SubMenu = Menu.SubMenu;

const menu = (
  <menu>
    1st menu item
    2nd menu item
    
      3d menu item
      4th menu item
    
    
      5d menu item
      6th menu item
    
  </menu>
);

import React from 'react'
import { Menu, Icon, Button } from 'antd';
const SubMenu = Menu.SubMenu;
const MenuItemGroup = Menu.ItemGroup;

import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'

//actions
import * as subjectinfoActions from '../../actions/subjectinfo'
import * as classinfoActions from '../../actions/classinfo'

//路由组件
import { Route,Link,Switch  } from 'react-router-dom';

//头部条
import HeaderBar from './header_bar'

//首页

import React from 'react';
import { Menu } from 'antd';
import { Link } from 'react-router';

const SubMenu = Menu.SubMenu;
const MenuItemGroup = Menu.ItemGroup;

const componentOrder = [
  '地图',
  '覆盖物',
  '信息窗体'
];

function getComponentsMenuLink(meta) {
  const filename = meta.filename;
  const link = '/' + filename.slice(0, filename.indexOf('index.md') - 1);
  return {meta.title};
}

function getComponentsMenuItem(menus) {
  return menus.sort((a, b) => (a.meta.order - b.meta.order)).map((item) => {