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 作後臺界面的更常見)