0
点赞
收藏
分享

微信扫一扫

[React] 14.React -使用Ant Design组件库

爱做梦的老巫婆 2022-04-16 阅读 76
  1. 进入Ant Design官网,点开始使用
  2. 进入菜单栏:Ant Design of React,找到安装命令,在命令行中执行安装
    在这里插入图片描述
npm install antd --save
  1. 安装完成后,若想使用组件库,需将样式引入:
    在index.js中,引入代码import 'antd/dist/antd.css';
  2. 在component中引入要使用的组件:
    若要引入button:
import { Button } from 'antd';

之后就可使用Button组件
5. 使用button组件:

render() {
        return (
            <Fragment>
            <Button type="primary">Primary Button</Button>
            <div onClick={this.handleClick.bind(this)}>
                hello world
            </div>
            </Fragment>
        )
    }

在这里插入图片描述
完整代码:
index.js中:

import React from 'react';
import ReactDOM from 'react-dom';
import Counter from './counter'
import 'antd/dist/antd.css';

// 将内容挂载到页面上
ReactDOM.render(<Counter />, document.getElementById('root'));

counter.js中

import React, {Component, Fragment} from "react";

import axios from "axios";
import {Button} from 'antd';
class Counter extends Component {
    handleClick() {
        window.addEventListener('click', ()=> {
            console.log('window click')
        })
    }
    render() {
        return (
            <Fragment>
                <Button type="primary">Primary Button</Button>
                <div onClick={this.handleClick.bind(this)}>
                    hello world
                </div>
            </Fragment>
        )
    }
}

export default Counter
举报

相关推荐

0 条评论