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> ) }
- 写一个垂直菜单(要先引入Menu组件)
-
- 把菜单放在Sider中
<Sider> {this.renderSiderMenu()}</Sider>
- 把菜单放在Sider中
效果如下图:
其他组件的具体用法可以查看Ant Design官网示例。
END----------------------