当前位置： 移动技术网 > IT编程>开发语言>JavaScript > React好帮手--Ant Design 组件库的使用

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

2020年04月15日  | 移动技术网IT编程  | 我要评论

 

 

首先是安装

 

 

 

 

在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用的头像有点吓人，大晚上看的瘆得慌，哈哈哈

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

 

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网