react_app 项目开发 (4)_ React UI 组件库 ant-design 的基本使用

最流行的开源 React UI 组件库material-ui 国外流行（安卓手机的界面效果）文档ant-design 国内流行(蚂蚁金服设计，一套 PC、一套移动端的____下拉菜单、分页......)PC_gitMobile_gitcreate-react-app myAppyarn add antd// 安装到生产依赖在 ind...

aof26372

141人浏览 · 2019-01-13 14:57:00

aof26372 · 2019-01-13 14:57:00 发布

最流行的开源 React UI 组件库

material-ui 国外流行（安卓手机的界面效果）文档
ant-design 国内流行 (蚂蚁金服设计，一套 PC、一套移动端的____下拉菜单、分页......)

PC_git

Mobile_git

create-react-app myApp

yarn add antd // 安装到生产依赖

在 index.js 中 import "antd/dist/antd.min.css" 会打包全部文件

import React, { Component } from 'react';

import {Link, Route} from "react-router-dom";

import MessageDetail from "./MessageDetail/MessageDetail";

import {Button, message} from "antd";    /* 1. 引入 */
import "antd/dist/antd.min.css"    /* 2. 引入样式 */

import "./css/Messages.css";

export default class Messages extends Component {
    constructor(props){
        super(props);
        this.state = {
            messages:[]
        };
        this.pushLink = this.pushLink.bind(this)
        this.replaceLink = this.replaceLink.bind(this)
    }
    
    pushLink(messageId){
        this.props.history.push("/home/messages/"+messageId);
    }
    
    replaceLink(messageId){
        this.props.history.replace("/home/messages/"+messageId);
    }
    
    componentDidMount(){
        window.setTimeout(()=>{
            this.setState({
                messages:[
                    {id:1, title:"Time is running!"},
                    {id:3, title:"You should working hard !"},
                    {id:5, title:"Because the life is hard !"}
                ]
            });
        }, 400);
    }
    
    render() {
        const {messages} = this.state;
        return (
            <div className="messages clearfix">
                <ul>
                    {
                        messages.map((message)=>{
                            return (
                                <li key={message.id}>
                                    <Link to={`/home/messages/`+message.id}>
                                        {message.title}
                                    </Link>
                                    <div>
                                        <button onClick={()=>this.pushLink(message.id)}>Push 查看</button>
                                        <button onClick={()=>this.replaceLink(message.id)}>Replace 查看</button>
                                    </div>
                                </li>
                            )
                        })
                    }
                </ul>
                
          {/* 3. 使用 - 标签使用 */}
          <Button type="primary" onClick={()=>message.info("antd 按钮 message.info")}>
              HelloWorld
          </Button>&nbsp;&nbsp;&nbsp;&nbsp;
                
                <button onClick={()=>this.props.history.goBack()}>
                    回退 ?
                </button>&nbsp;&nbsp;&nbsp;&nbsp;
                
                <Button type="primary" onClick={()=>this.props.history.goForward()}>
                    前进 ?
                </Button><hr/>
                
                <Route path="/home/messages/:id" component={MessageDetail}/>
            </div>
        );
    }
}

"antd/dist/antd.min.css" 按需打包

// 下载依赖模块，最新版本有问题

yarn remove react-scripts

cyarn add react-scripts@2.1.1 --dev

cyarn add react-app-rewired@1.6.2 babel-plugin-import --dev

// 注意屏蔽 import "antd/dist/antd.min.js"

// 注意去掉 package.json 原来的 react-scripts

// 对之前的命令进行了包装 ---- 区别在于：会加入配置文件 config-overrides.js 而使按需打包生效

改成

在 package.json 同级文件夹下创建 config-overrides.js

const {injectBabelPlugin} = require('react-app-rewired');

module.exports = function override(config, env) {
    config = injectBabelPlugin(
        [
            'import',    // 声明 babel-plugin-import 根据 import 进行打包
            {
                libraryName: 'antd',    // 针对 entd 进行打包
                libraryDirectory: 'es',
                style: 'css'    // 自动打包 其 css 文件
            }
        ],
        config
    );
    return config;
};

对于 Button 为例，会只会打包如下图的 index.css 这一个文件

所以按需打包 css 和 js 的代码如下：

import React, { Component } from 'react';

import {Link, Route} from "react-router-dom";

import MessageDetail from "./MessageDetail/MessageDetail";

import {Button, message} from "antd";    /* 1. 引入 */
/* import "antd/dist/antd.min.css"    // 会导入整个 css, 显然不是我们想要的*/

import "./css/Messages.css";

export default class Messages extends Component {
    constructor(props){
        super(props);
        this.state = {
            messages:[]
        };
        this.pushLink = this.pushLink.bind(this)
        this.replaceLink = this.replaceLink.bind(this)
    }
    
    pushLink(messageId){
        this.props.history.push("/home/messages/"+messageId);
    }
    
    replaceLink(messageId){
        this.props.history.replace("/home/messages/"+messageId);
    }
    
    componentDidMount(){
        window.setTimeout(()=>{
            this.setState({
                messages:[
                    {id:1, title:"Time is running!"},
                    {id:3, title:"You should working hard !"},
                    {id:5, title:"Because the life is hard !"}
                ]
            });
        }, 400);
    }
    
    render() {
        const {messages} = this.state;
        return (
            <div className="messages clearfix">
                <ul>
                    {
                        messages.map((m)=>{
                            return (
                                <li key={m.id}>
                                    <Link to={`/home/messages/`+m.id}>
                                        {m.title}
                                    </Link>
                                    <div>
                                        <button onClick={()=>this.pushLink(m.id)}>Push 查看</button>
                                        <button onClick={()=>this.replaceLink(m.id)}>Replace 查看</button>
                                    </div>
                                </li>
                            )
                        })
                    }
                </ul>
                
          {/* 2. 使用 - 标签使用 */}
          <Button type="primary" onClick={()=>message.info("antd 按钮 message.info")}>
              HelloWorld
          </Button>&nbsp;&nbsp;&nbsp;&nbsp;
                
                <button onClick={()=>this.props.history.goBack()}>
                    回退 ?
                </button>&nbsp;&nbsp;&nbsp;&nbsp;
                
                <Button type="primary" onClick={()=>this.props.history.goForward()}>
                    前进 ?
                </Button><hr/>
                
                <Route path="/home/messages/:id" component={MessageDetail}/>
            </div>
        );
    }
}

可以明显看出 antd 的按钮和普通的按钮的差别

更改主题颜色

cyarn add react-app-rewire-less --dev

修改 config-overrides.js , 其实其内部的实现是 less，需要查看文档，根据对应的变量，进行颜色的 DIY

const {injectBabelPlugin} = require('react-app-rewired');
const rewireLess = require('react-app-rewire-less');

module.exports = function override(config, env) {
    config = injectBabelPlugin(
        [
            'import',    // 声明 babel-plugin-import 根据 import 进行打包
            {
                libraryName: 'antd',    // 针对 entd 进行打包
                libraryDirectory: 'es',
                style: true    // 自动打包 其 css 文件 - true 打包 js、css
            }
        ],
        config
    );
    
    config = rewireLess.withLoaderOptions({
        modifyVars: {"@primary-color": "#ff0000"},
        javascriptEnabled: true,
    })(config, env);
    
    return config;
};