React.js集成Antd组件库

集成引用

1
2
yarn add babel-plugin-import
yarn add antd

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

1
import 'antd/dist/antd.css';

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
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;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
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

组件操作

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
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;

Powered by AppBlog.CN     浙ICP备14037229号

Copyright © 2012 - 2020 APP开发技术博客 All Rights Reserved.

访客数 : | 访问量 :