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

最流行的开源 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;
  };

• 

源码参见： Source

 

• 基于 react+antd 后台管理系统 (现实生活中，react 做后台界面的更常见)