React好帮手--Ant Design 组件库的使用

前端之家收集整理的这篇文章主要介绍了React好帮手--Ant Design 组件库的使用前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

 

 

首先是安装

 

 

 

 

在index.js中引入样式

 

 跟着官网点组件

 

 

 

 

  1. import React,{Component} from 'react';
  2. import { Button } from 'antd';
  3. class Counter extends Component{
  4. render(){
  5. console.log('render');
  6. return(
  7. <div>
  8. <Button type="primary">Primary</Button>
  9. <Button>Default</Button>
  10. <Button type="dashed">Dashed</Button>
  11. <Button type="link">Link</Button>
  12. </div>
  13. )
  14. }
  15. }
  16. export default Counter;

 

 

可以看到我的代码底部是有报错的,这是因为使用了严格模式

 

 

进入index.js查看,确实有严格模式

 

 

去掉这两句就行

 

 

我们可以再来试试列表效果

  1. import React,1)">;
  2. import { List,Avatar } from 'antd';
  3. const data = [
  4. {
  5. title: 'Ant Design Title 1',},{
  6. title: 'Ant Design Title 2''Ant Design Title 4'(
  7. <List
  8. itemLayout="horizontal"
  9. dataSource={data}
  10. renderItem={item => (
  11. <List.Item>
  12. <List.Item.Meta
  13. avatar={<Avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />}
  14. title={<a href="https://ant.design">{item.title}</a>}
  15. description="Ant Design,a design language for background applications,is refined by Ant UED Team"
  16. />
  17. </List.Item>
  18. )}
  19. />
  20. default Counter;

 

 这demo用的头像有点吓人,大晚上看的瘆得慌,哈哈哈

我们也可以在这个组件上再添加一点样式

 

猜你在找的Ant Design相关文章