React學習及實例開發（二）——用Ant Design寫一個簡單頁面

本文基於React v16.4.1

初學react，有理解不對的地方，歡迎批評指正^_^

一、引入Ant Design

1、安裝antd

yarn add antd

2、引入 react-app-rewired （一個對 create-react-app 進行自定義配置的社區解決方案）

yarn add react-app-rewired --dev

3、把 package.json 里的scripts部分改為

"scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test --env=jsdom",
    "eject": "react-scripts eject"
},

4、在項目根目錄創建一個 config-overrides.js 用於修改默認配置

module.exports = function override(config, env) {
  // do stuff with the webpack config...
  return config;
};

5、安裝babel-plugin-import（用於按需加載組件代碼和樣式的 babel 插件）

yarn add babel-plugin-import --dev

6、修改 config-overrides.js 文件

const { injectBabelPlugin } = require('react-app-rewired');
module.exports = function override(config, env) {
    config = injectBabelPlugin(['import', { libraryName: 'antd', libraryDirectory: 'es', style: 'css' }], config);
    return config;
};

二、使用Ant Design組件

1、Layout布局

Layout是布局容器，其下可嵌套 Header（頂部）、Sider（側邊欄）、Content（內容部分）、Footer（底部），也可嵌套Layout本身。

在App.js引入並使用Layout ，效果如下圖（css略）

import React, { Component } from 'react';
import './App.css';
import { Layout } from 'antd';
const { Header, Footer, Sider, Content } = Layout;
class App extends Component {
  render() {
    return (
      <Layout>
        <Sider>Sider</Sider>
        <Layout>
          <Header>Header</Header>
          <Content>Content</Content>
          <Footer>Footer</Footer>
        </Layout>
      </Layout>
    );
  }
}
export default App;

 

　　2、Menu導航菜單

　　　　*Menu有很多參數，下面用到的有：

　　　　　　theme：主題，可選light、dark；

　　　　　　defaultSelectedKeys：初始選中的菜單項 key 數組；

　　　　　　mode：菜單類型，可選 vertical、vertical-right、horizontal、inline，分別是垂直左、垂直右、水平、內嵌。

　　　　*Menu.Item是Menu的子項，key 是 item 的唯一標志。

　　　　*SubMenu是子菜單，用到的參數有：

　　　　　　key：唯一標志；

　　　　　　title：子菜單項值。

• • 寫一個垂直菜單（要先引入Menu組件）

    renderSiderMenu(){
        return(
          <Menu theme="dark" defaultSelectedKeys={['1']} mode="inline">
            <Menu.Item key="1">
              <Icon type="pie-chart" />
              <span>Option 1</span>
            </Menu.Item>
            <SubMenu
              key="sub1"
              title={<span><Icon type="user" /><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>    
          </Menu>
        )
      }

• • 把菜單放在Sider中

    <Sider> {this.renderSiderMenu()}</Sider>

　　效果如下圖：

　

其他組件的具體用法可以查看Ant Design官網示例。

END----------------------