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