【转载】基于Ant Design UI 框架的 React 项目

转自：http://www.demodashi.com/demo/12205.html

全局安装 create-react-app 脚手架

npm install -g create-react-app

创建 React 项目 antd-demo

create-react-app antd-demo

引入 Ant Design 组件库

yarn add antd

访问项目

运行 http://localhost:3000

创建页面

• 在 src 目录下创建一个 Home 文件夹用来存放自己的代码

• 在 test.js 页面添加如下代码：

  import React,{Component} from 'react';
      import { Layout, Menu, Breadcrumb, Icon } from 'antd';
      import 'antd/dist/antd.css';
      import logo from '../logo.svg';
      import './myCss.css'
      const { Header, Content, Footer, Sider } = Layout;
      //自定义组件SiderDemo
      class SiderDemo extends Component {
          state = {
              collapsed: false,
              mode: 'inline',
          };
          toggle = () => {
              this.setState({
                  collapsed: !this.state.collapsed,
              });
          }
          render() {
              return (
                  <Layout>
                      <Sider
                          trigger={null}
                          collapsible
                          collapsed={this.state.collapsed}
                      >
                          <div className="logo" />
                          <Menu theme="dark" mode="inline" defaultSelectedKeys={['1']}>
                              <Menu.Item key="1">
                                  <Icon type="user" />
                                  <span className="nav-text">nav 1</span>
                              </Menu.Item>
                              <Menu.Item key="2">
                                  <Icon type="video-camera" />
                                  <span className="nav-text">nav 2</span>
                              </Menu.Item>
                              <Menu.Item key="3">
                                  <Icon type="upload" />
                                  <span className="nav-text">nav 3</span>
                              </Menu.Item>
                          </Menu>
                      </Sider>
                      <Layout>
                          <Header style={{ background: '#000', padding: 0 }}>
                              <span style={{color:'#fff', paddingLeft:'2%', fontSize:'1.4em'}}>
                                  <Icon
                                      className="trigger"
                                      type={this.state.collapsed ? 'menu-unfold' : 'menu-fold'}
                                      onClick={this.toggle}
                                      style={{cursor: 'pointer'}}
                                  />
                              </span>
                              <span style={{color:'#fff', paddingLeft:'2%', fontSize:'1.4em'}}>Information Management System</span>
                              <span style={{color:'#fff', float:'right', paddingRight:'1%'}}>
                                  <img src={logo} className="App-logo" alt="logo" />
                              </span>
                          </Header>
                          <Content style={{ margin: '0 16px' }}>
                              <Breadcrumb style={{ margin: '12px 0' }}>
                                  <Breadcrumb.Item>User</Breadcrumb.Item>
                                  <Breadcrumb.Item>Bill</Breadcrumb.Item>
                              </Breadcrumb>
                              <div style={{ padding: 24, background: '#fff', minHeight: 780 }}>
                              </div>
                          </Content>
                          <Footer style={{ textAlign: 'center' }}>
                              Ant Design ©2016 Created by Ant UED
                          </Footer>
                      </Layout>
                  </Layout>
              );
          }
      }
      //输出组件
      export default SiderDemo;

• 在 test.css 添加代码

  .App-logo {
          animation: App-logo-spin infinite 10s linear;
          height: 60px;
      }
  
      @keyframes App-logo-spin {
          from { transform: rotate(0deg); }
          to { transform: rotate(360deg); }
      }
  
      .logo {
          height: 32px;
          background: #333;
          border-radius: 6px;
          margin: 16px;
      }
  
      .ant-layout-sider-collapsed .anticon {
          font-size: 16px;
      }
  
      .ant-layout-sider-collapsed .nav-text {
          display: none;
      }

• 修改 src\index.css 的内容

  body {
        margin: 0;
        padding: 0;
        font-family: sans-serif;
      }
      @import "./Home/myCss.css";/*引入自己写的css样式**/

• 修改 src\index.js 内容

  import React from 'react';
  import ReactDOM from 'react-dom';
  import './index.css';//引入样式
  import SiderDemo from './Home/myIndex';//引入自己写的组件(class)
  import registerServiceWorker from './registerServiceWorker';
  
      ReactDOM.render(<SiderDemo />, document.getElementById('root'));
      registerServiceWorker();
      //registerServiceWorker就是为react项目注册了一个service worker，
      // 用来做资源的缓存，这样你下次访问时，就可以更快的获取资

  之后查看效果即可。

export 'Icon' (imported as 'Icon') was not found in 'antd' 错误的解决

问题原因：Ant Design 从 v3 升级到 v4 导致，图标升级（点击可查看文档），旧版 Icon 使用方式将被废弃，解决办法：
首先安装：yarn add @ant-design/compatible
引入：import { Icon } from "@ant-design/compatible";
再重新运行代码这个问题就可以解决了。