欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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. ......

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

 

 

首先是安装

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

 

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

 

 

在index.js中引入样式

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

 

 跟着官网点组件

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

 

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

 

 

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;

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

 

 

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

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

 

 

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

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

 

 

去掉这两句就行

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

 

 

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

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;

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

 

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

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

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

 

上一篇:

下一篇: