React学习及实例开发（二）——用Ant Design写一个简单页面

本文基于React v16.4.1

初学react，有理解不对的地方，欢迎批评指正^_^

1、引入Ant Design

一、安装antd

yarn add antd

二、引入 react-app-rewired （一个对 create-react-app 进行自定义配置的社区解决方案）

yarn add react-app-rewired --dev

三、把 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"
},

四、在项目根目录建立一个 config-overrides.js 用于修改默认配置

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

五、安装babel-plugin-import（用于按需加载组件代码和样式的 babel 插件）

yarn add babel-plugin-import --dev

六、修改 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;
};

2、使用Ant Design组件

一、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;

 

　　二、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----------------------