antd 引入

安裝

使用 npm 或 yarn 安裝

我們推薦使用 npm 或 yarn 的方式進行開發，不僅可在開發環境輕松調試，也可放心地在生產環境打包部署使用，享受整個生態圈和工具鏈帶來的諸多好處。

$ npm install antd --save

$ yarn add antd

瀏覽器引入

引入樣式：

import 'antd/dist/antd.css'; // or 'antd/dist/antd.less'

示例

import React from 'react';
import ReactDOM from 'react-dom';
import { ConfigProvider, DatePicker, message } from 'antd';
// 由於 antd 組件的默認文案是英文，所以需要修改為中文
import zhCN from 'antd/es/locale/zh_CN';
import moment from 'moment';
import 'moment/locale/zh-cn';
import 'antd/dist/antd.css';
import './index.css';

moment.locale('zh-cn');

class App extends React.Component {
  state = {
    date: null,
  };

  handleChange = date => {
    message.info(`您選擇的日期是: ${date ? date.format('YYYY-MM-DD') : '未選擇'}`);
    this.setState({ date });
  };
  render() {
    const { date } = this.state;
    return (
      <ConfigProvider locale={zhCN}>
        <div style={{ width: 400, margin: '100px auto' }}>
          <DatePicker onChange={this.handleChange} />
          <div style={{ marginTop: 20 }}>
            當前日期：{date ? date.format('YYYY-MM-DD') : '未選擇'}
          </div>
        </div>
      </ConfigProvider>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('root'));