React+antd组件库使用方法

首先介绍一下antd组件库

antd组件库是蚂蚁集团的企业级产品是一个庞大且复杂的系统，数量多且功能复杂，而且变动和并发频繁，常常需要设计者与开发者能快速做出响应。同时这类产品中有存在很多类似的页面以及组件，可以通过抽象得到一些稳定且高复用性的内容。

随着商业化的趋势，越来越多的企业级产品对更好的用户体验有了进一步的要求。带着这样的一个终极目标，我们（蚂蚁集团体验技术部）经过大量项目实践和总结，逐步打磨出一个服务于企业级产品的设计体系 —— Ant Design。基于「自然」、「确定性」、「意义感」、「生长性」四大设计价值观，通过模块化解决方案，降低冗余的生产成本，让设计者专注于更好的用户体验。

1、 antd 是基于 Ant Design 设计体系的 React UI 组件库
2、开箱即用的高质量 React 组件
3、使用 TypeScript 构建，提供完整的类型定义文件

一、装包

npm install antd --save

二、进入官方找到需要的组件

以按钮、输入框作为介绍

进入官方页面点击顶部导航栏的组件。

在左侧导航栏找到按钮

找一个想用的按钮 下面最右侧的图标显示代码

 三、引用

需要使用antd组件的页面导入所需组件，并且导入antd的样式文件

import { Button } from 'antd';
import 'antd/dist/antd.css'

在页面中引入组件库的按钮和css样式文件

把按钮的代码复制到组件中需要的位置即可

import React, { Component } from 'react'
import { Button } from 'antd';
import 'antd/dist/antd.css'
export default class Zj extends Component {
    static propTypes = {

    }

    render() {
        return (
            <div>
                <Button type="primary">按钮组件</Button>
            </div>
        )
    }
}

效果：

输入框引入  需要在import里面引入一个输入框的组件

import { Input, Button } from 'antd'

 在组件库中找一个合适的输入框复制代码写到页面即可

import React, { Component } from 'react'
import { Button,Input } from 'antd';
import 'antd/dist/antd.css'
export default class Zj extends Component {
    static propTypes = {

    }

    render() {
        return (
            <div>
                <Button type="primary">按钮组件</Button>
                <Input placeholder="输入框" />
            </div>
        )
    }
}

 其他组件大致差不多