React好帮手--Ant Design 组件库的使用
程序员文章站
2024-01-04 08:16:33
首先是安装 在index.js中引入样式 跟着官网点组件 import React,{Component} from 'react'; import { Button } from 'antd'; class Counter extends Component{ render(){ console. ......
首先是安装
在index.js中引入样式
跟着官网点组件
import react,{component} from 'react'; import { button } from 'antd'; class counter extends component{ render(){ console.log('render'); return( <div> <button type="primary">primary</button> <button>default</button> <button type="dashed">dashed</button> <button type="link">link</button> </div> ) } } export default counter;
可以看到我的代码底部是有报错的,这是因为使用了严格模式
进入index.js查看,确实有严格模式
去掉这两句就行
我们可以再来试试列表效果
import react,{component} from 'react'; import { list, avatar } from 'antd'; const data = [ { title: 'ant design title 1', }, { title: 'ant design title 2', }, { title: 'ant design title 3', }, { title: 'ant design title 4', }, ]; class counter extends component{ render(){ console.log('render'); return( <list itemlayout="horizontal" datasource={data} renderitem={item => ( <list.item> <list.item.meta avatar={<avatar src="https://zos.alipayobjects.com/rmsportal/odtlcjxafvqbxhnvxcyx.png" />} title={<a href="https://ant.design">{item.title}</a>} description="ant design, a design language for background applications, is refined by ant ued team" /> </list.item> )} /> ) } } export default counter;
这demo用的头像有点吓人,大晚上看的瘆得慌,哈哈哈
我们也可以在这个组件上再添加一点样式