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()}>
                      回退