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

posted @ 2018-06-29 17:16 麦豇豆 阅读(...) 评论(...) 编辑 收藏