React.js集成Antd组件库

集成引用

yarn add babel-plugin-import
yarn add antd

安装完毕后，首先在index.js中引入antd的css文件

import 'antd/dist/antd.css';

之后，在需要用到antd的组件js中引入所需部件即可

import React from 'react';
import { Button } from 'antd';

class AntdTest extends React.Component {
    clickMe() {

    }

    render() {
        return (
            <div className="App">
                <Button type="primary" onClick={this.clickMe}>Primary</Button>
                <Button>Default</Button>
                <Button type="dashed">Dashed</Button>
                <Button type="danger">Danger</Button>
            </div>
        );
    }
}

export default AntdTest;

import React from 'react';
import { Button } from 'antd';

function AntdTest() {
    return (
        <div className="App">
            <Button type="primary">Primary</Button>
            <Button>Default</Button>
            <Button type="dashed">Dashed</Button>
            <Button type="danger">Danger</Button>
        </div>
    );
}

export default AntdTest;

而在IE11下，会报不支持startsWith的错
需要安装npm install --save babel-polyfill
然后在入口文件index.js中引入import 'babel-polyfill';
因为startWith是2015年语言规范里更新的，IE始终没有支持，需要用低版本的js实现高版本的js

组件操作

import React from 'react';
import { Button, notification, Icon } from 'antd';

class AntdTest extends React.Component {
    clickMe() {
        notification.open({
            message: 'Notification Title',
            description:
                'http://www.appblog.cn',
            icon: <Icon type="smile" style={{ color: '#108ee9' }} />,
        });
    };

    render() {
        return (
            <div className="App">
                <Button type="primary" onClick={this.clickMe}>Primary</Button>
                <Button>Default</Button>
                <Button type="dashed">Dashed</Button>
                <Button type="danger">Danger</Button>
            </div>
        );
    }
}

export default AntdTest;