项目实战二、antd的安装与应用

1.yarn add antd安装antd

yarn add antd

2.引入antd中的组件，并引入antd.css，实例如下

import React from 'react'
import Child from './Child'//引入子组件
import {Button} from 'antd'//引入antd中的Button组件
import './index.less'
import 'antd/dist/antd.css'//导入antd的css样式
export default class Life extends React.Component{
    constructor(props){ //初始化
       super(props);
       this.state = {
           count:0
       }
    }
    haddleAdd = () =>{
        this.setState({
            count:this.state.count + 1
        });
    }
    haddleClick(){
       this.setState({
           count:this.state.count + 1
       }); 
    }
    render(){
        let style = {
            padding:50
        }
        // return <div style={style}>
        return <div className="content">
            <p>react-fastlink之React生命周期介绍1</p>
            <Button onClick = {this.haddleAdd}>Antd点击试试</Button>
            <button onClick = {this.haddleAdd}>点击一下</button>
            <button onClick = {this.haddleClick.bind(this)}>点击一下</button>
            <p>{this.state.count}</p>
            <Child name="Jack"></Child>
        </div>
    }
}

结果：