umi 起步 使用antd的菜单

周大胖子

报错1 ： const App = React.createClass({ 这里报错，我查了一下 没闹明白为啥 网上说是因为react16 把这个方法移除了，所以我就换了一个：

1. import createReactClass from 'create-react-class';
   
2. const Header = createReactClass({

复制代码

参考网址：https://www.jianshu.com/p/8e523899503e

报错2 ：

1. ReactDom.render(<Header />, document.getElementById("header"));

复制代码

这个 我说实话 还是没闹明白 所以我很干脆到使用了 我看得懂到东西

1. export default Header;

复制代码

更新今天到导航代码

1. // 这是头部组件  
   
2. import React , { Fragment, Component }from 'react';
   
3. import ReactDom from 'react-dom';
   
4. import createReactClass from 'create-react-class';
   
5. import { Link } from 'umi';
   
6. import styles from './header.css';
   
7. 
   
8. // var createReactClass = require('create-react-class');
   
9. // import { Link } from 'umi';
   
10. 
    
11. // class Header extends Component{
    
12. 
    
13. //     constructor(props)
    
14. //     {
    
15. //         super(props);
    
16. //     }
    
17. 
    
18. 
    
19. //     render(){
    
20. //         return  <Fragment>
    
21. //                     <div>
    
22. //                         <h2>
    
23. //                             <Link to="/">主页</Link>
    
24. //                         </h2>
    
25. //                         <h2>
    
26. //                             <Link to="/news">新闻</Link>
    
27. //                         </h2>
    
28. //                     </div>
    
29. 
    
30. //             </Fragment>;
    
31. //     }
    
32. 
    
33. // }
    
34. 
    
35. 
    
36. // export default Header;
    
37. import { Menu, Icon } from 'antd';
    
38. const SubMenu = Menu.SubMenu;
    
39. const MenuItemGroup = Menu.ItemGroup;
    
40. 
    
41. const Header = createReactClass({
    
42.   getInitialState() {
    
43.     return {
    
44.       current: 'mail',
    
45.     };
    
46.   },
    
47.   handleClick(e) {
    
48.     console.log('click ', e);
    
49.     this.setState({
    
50.       current: e.key,
    
51.     });
    
52.   },
    
53.   render() {
    
54.       console.log(Menu)
    
55.       console.log(1)
    
56.     return (
    
57.       <Menu onClick={this.handleClick}
    
58.         selectedKeys={[this.state.current]}
    
59.         mode="horizontal"
    
60.       >
    
61.         <Menu.Item key="mail">
    
62.           <Icon type="mail" />
    
63.           <Link className={styles.headA} to="/">主页</Link>
    
64.         </Menu.Item>
    
65.         <Menu.Item key="app" >
    
66.           <Icon type="appstore" />
    
67.           <Link className={styles.headA} to="/news">新闻</Link>
    
68.         </Menu.Item>
    
69.         <SubMenu title={<span><Icon type="setting" />导航 - 子菜单</span>}>
    
70.           <MenuItemGroup title="分组1">
    
71.             <Menu.Item key="setting:1">选项1</Menu.Item>
    
72.             <Menu.Item key="setting:2">选项2</Menu.Item>
    
73.           </MenuItemGroup>
    
74.           <MenuItemGroup title="分组2">
    
75.             <Menu.Item key="setting:3">选项3</Menu.Item>
    
76.             <Menu.Item key="setting:4">选项4</Menu.Item>
    
77.           </MenuItemGroup>
    
78.         </SubMenu>
    
79.         <Menu.Item key="alipay" disabled>
    
80.           <a href="http://www.alipay.com/" target="_blank">导航四 - 链接</a>
    
81.         </Menu.Item>
    
82.       </Menu>
    
83.     );
    
84.   },
    
85. });
    
86. 
    
87. // ReactDom.render(<Header />, document.getElementById("header"));
    
88. 
    
89. 
    
90. export default Header;
    

复制代码