常见组件

<Empty/>

import { Empty } from 'antd';

<Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />;

<Button>

import { Button } from 'antd';

<Button type="primary" size='small' danger>
      Button
</Button>

<Icon/>

import { AreaChartOutlined } from '@ant-design/icons';

<AreaChartOutlined />

<Tag/>

import { Tag } from 'antd';

<Tag color="magenta">magenta</Tag>;

<Pagination/>

import { Pagination } from 'antd';

<Pagination 
    defaultCurrent={1} 
    pageSize={page_size} 
    total={all_items} 
    current={current_page} 
    onChange={this.pageChange}
 />;

example:

import React,{ Component } from "react";
import { Pagination } from 'antd';

export default class App extends Component{
    state = {
      current_page: 1,
      page_size:0,
      all_items:0
    }

    componentDidMount(){
      //http
      this.setState({
        page_size:5,
        all_items:100
      })
    }

    renderPage = (page,pageSize) =>{
      //http
    }

    pageChange = (page, pageSize) =>{
      console.log("page,pageSize =>",page," ",pageSize)
      this.setState({
        current_page: page,
        page_size:pageSize
      })
      //todo
      this.renderPage(page,pageSize)
    }

    render(){
        const {current_page,page_size,all_items} = this.state
        return(
            <div>
                <Pagination 
                  pageSize={page_size} 
                  total={all_items} 
                  current={current_page} 
                  onChange={this.pageChange}
                  pageSizeOptions={[5,10,15]}
                />
            </div>
        )
    }
}

API

<Table/>

一般Table组件搭配Empty组件使用

antd的table组件是真tm难用啊，很多人反应数据达到200+，卡的一批，知乎:为什么Ant-Design的Table性能这么低？

但是table还是得用啊，临时解决方案用的是react-bootstrap

# 1. install
npm install react-bootstrap --save
# 2, public index.html引入样式文件
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css">

使用：

import React, { Component } from 'react'
import { Table} from 'react-bootstrap';

export default class Test extends Component {
  render() {
    return (
      <div>
        <Table striped bordered condensed='true' hover>
            <thead>
                <tr>
                    <th>#</th>
                    <th>First Name</th>
                    <th>Last Name</th>
                    <th>Username</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td>1</td>
                    <td>Mark</td>
                    <td>Otto</td>
                    <td>@mdo</td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>Jacob</td>
                    <td>Thornton</td>
                    <td>@fat</td>
                </tr>
                <tr>
                    <td>3</td>
                    <td colSpan="2">Larry the Bird</td>
                    <td>@twitter</td>
                </tr>
            </tbody>
        </Table>
      </div>
    )
  }
}

效果如下：

<Input/>

import { Input } from 'antd';
<Input placeholder="Basic usage" />;

import { Input } from 'antd';
const { Search } = Input;

<Search
      placeholder="input search text"
      allowClear
      enterButton="Search"
      size="large"
      onSearch={onSearch}
    />

API

<Checkbox/>

import React, { useState } from 'react';
import { Checkbox } from 'antd';

const App = () => {
  const options = [
    {
      label: 'Easter', //label作ui展示
      value: 'EA', //value作数据提交
    },
    {
      label: 'Valentine',
      value: 'VAL',
    },
    {
      label: 'Holiday Time',
      value: 'HOL',
    },
  ]
  const [value, setValue] = useState(()=>{
    //todo
    //http
    return ["HOL"]
  })

  const onChange = (checkedValues) => {
    // setValue(checkedValues)
    console.log('checked = ', checkedValues);
    setValue(checkedValues)
  };

  return (
    <>
      <Checkbox.Group options={options} value={value} onChange={onChange} />
    </>
  )
}

export default App;

效果展示:

API:

<Select/>

import React, {useState} from 'react';
import { Select } from 'antd';

const App = () => {
  const options = [
    {
      value: 'Jay Zhou',
      label: 'Jay',
    },
    {
      value: 'Lucy Tang',
      label: 'Lucy',
    },
    {
      value: 'Scott Xiong',
      label: 'Scott',
    },
    {
      value: 'Timmy He',
      label: 'Timmy',
      disabled: true,
    },
  ]

  const [value, setValue] = useState("lucy")

  const handleChange = (value) => {
    console.log(`selected ${value}`);
    setValue(value)
  };

  return (
    <Select
      value={value}
      style={{
        width: 120,
      }}
      onChange={handleChange}
      options={options}
    />
   
  );
}

export default App;

效果展示: