React使用antd_react antd-程序员宅基地

技术标签： react.js React

antd

antd是AntDesign的简称，它是基于 Ant Design 设计体系的 React UI 组件库，主要用于研发企业级中后台产品。

国外镜像：https://ant.design/docs/react/introduce-cn

国内镜像：https://ant-design.gitee.io/docs/react/introduce-cn

国内的反应会更快些。

对于我们前端开发者来说，需要了解antd得到组件部分，还有它如何使用到React组件中的部分。

React中使用antd

1.首先需要安装antd，进入我们的项目文件打开终端输入。

yarn add antd

当然也可以使用npm命令，但比较推荐使用yarn，为什么呢？因为yarn更好用。

2.紧接着就是引入样式，只需引入一次即可。

在跟文件index.js文件里加上

import 'antd/dist/reset.css';

或是在App.css里加上

@import '~antd/dist/antd.css';

3.下面我们可以开始使用组件了，这里我们选择了下拉菜单，我们选择第一个，看见下方的<>可以点击一下然后选择你需要的代码（ts/js）,在这里我们选择了JavaScript

下面变色复制代码了

import React from 'react';
import { DownOutlined, SmileOutlined } from '@ant-design/icons';
import { Dropdown, Space } from 'antd';

function Home() {
    const items = [
        {
          key: '1',
          label: (
            <a target="_blank" rel="noopener noreferrer" href="https://www.antgroup.com">
              1st menu item
            </a>
          ),
        },
        {
          key: '2',
          label: (
            <a target="_blank" rel="noopener noreferrer" href="https://www.aliyun.com">
              2nd menu item (disabled)
            </a>
          ),
          icon: <SmileOutlined />,
          disabled: true,
        },
        {
          key: '3',
          label: (
            <a target="_blank" rel="noopener noreferrer" href="https://www.luohanacademy.com">
              3rd menu item (disabled)
            </a>
          ),
          disabled: true,
        },
        {
          key: '4',
          danger: true,
          label: 'a danger item',
        },
      ];

  return (
    <div className="Home">
      <Dropdown
    menu={
   {
      items,
    }}
  >
    <a onClick={(e) => e.preventDefault()}>
      <Space>
        Hover me
        <DownOutlined />
      </Space>
    </a>
  </Dropdown>

    </div>
  );
}

export default Home;

运行代码

yarn start

这样便出来antd中的样子了

andt技巧

快速查找你想要的组件功能

还以下拉菜单为例，右侧有组件的功能介绍，点击便可滑到组件的位置

如果某个组件里只用你想要的部分功能，向下滑动参考API里面有组件封装好的属性参数，都有其介绍供你使用。

本文链接：https://blog.csdn.net/qq_54780032/article/details/128225964

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

pycharm无法创建python file_pycharm无法导入本地模块的解决方式-程序员宅基地

文章浏览阅读2.2k次。最近学习python的django，需要导入本地的view模块，参考一些别人导入包的方法import syssys.path.append('C:\\Users\\hhua\\Desktop')#括号中的内容为A所在的目录importA.Demo1#不能加.py否则会报错(错误为没有这个文件A.Demo1.py)但是不论用相对路径导入还是绝对路径导入，运行都会出错，但是我又用命令行试了一遍，发现命..._pycharm 不能添加python file

北斗三号频点_Wideband全频点北斗信号模拟器-程序员宅基地

文章浏览阅读1.2k次。LabSat 3 Wideband是一种具有3个独立可调节宽带通道的RF信号录制和回放系统。它可录制和回放大多数GNSS信号，甚至包括少量非GNSS信号。三个RF通道全部共用一个共同采样速率，可从10MHz调节至60MHz。每个信号可选择1、2或3比特I和Q信号量化。根据通道带宽和量化组合情况，LabSat 3 Wideband会调节可用的RF通道数量，以将录制数据带宽保持在一个能确保连续文件传送..._labsat3频点

java 分段读取数据_java _io_ .read（）分段读取字节-程序员宅基地

文章浏览阅读210次。java _io_ .read()分段读取字节发布时间：2020-05-06 11:22:43来源：51CTO阅读：256作者：wx5d21d5e6e5ab1byte[] flush =new byte[n] //字节数组充当缓冲容器.read(flush) //每次返回读取的n个字节，当数据字节数不够时，返回实际字节数int len=-1; //接受read(flush)返回的实际长度Str..._如何分段读取byte

oracle 函数,oracle函数-程序员宅基地

文章浏览阅读55次。1、Oracle中函数大致可以分为哪两类？单行函数、聚合函数2、单行函数可以分为哪些？字符函数、数字函数、转换函数、日期函数、正则表达式函数3、字符函数有哪些？length(xx)lower(xx)、upper()例如：select * from emp where ename=UPPER('&STR');--用户输入为大写concat(m,n)--与拼接字符串||相似initcap(xx..._oracle nanvl

计算机主机组件图,电脑主机结构图大全-程序员宅基地

文章浏览阅读2.3k次。电脑主机结构图大全导语：电脑主机分为多种结构组合而成，这些被称之为硬件，电脑主机结构图是怎样的?下面是小编为您收集整理的资料，希望对您有所帮助。1.机箱(必备)机箱作为电脑配件中的一部分，就是主机的外壳，它起的主要作用是放置和固定各电脑配件，起到一个承托和保护作用，此外，电脑机箱具有电磁辐射的屏蔽的重要作用，现在的高配机箱具有防辐射、防尘、加强散热、静音等多中功能。但由于机箱不像CPU、显卡、主板..._台式计算机信息技术设备内外结构图

AndroidStudio如何进行手机应用开发？_android studio开发app-程序员宅基地

文章浏览阅读3.9k次，点赞7次，收藏82次。Android手机应用因其搭载于手机，使用便捷，应用被大量开发使用。笔者使用手机多年，也用过许多手机软件，在使用的过程中，虽然手机软件能解决大部分问题，但在实际发展过程中，难免会有更多的特定需求的产生，手机商业软件更多的是面向大众，而且开发成本也不低，这就导致若要实现自己的需求，就必须自己进行手机应用开发。笔者之前有过开发手机应用的经历，当时学得比较浅，技术并未进行总结，导致安卓开发技术并未成为我的技能，为了总结安卓开发技术，本文重走安卓编程之路，从最基础的编译环境安装和创建第一个手机应用进行阐述。 _android studio开发app

随便推点

关于--windows能ping通linux的ip，但是无法访问linux的tomcat首页的解决办法_windows可以ping通linux服务器,但是打不开服务器的网页-程序员宅基地

文章浏览阅读6.6k次。CentOS版本：6.8Windows操作系统版本：Win10Linux上的tomcat版本：7.0.65linux是使用的NAT模式，及共享主机的IP地址。本来想使用windows本地访问linux上的tomcat首页，结果一直访问不成功；但在windows下能够ping通linux的ip，这很明显就是linux的端口没有开放，所以就在linux上设置了一下防火墙，将以下配置加入到了..._windows可以ping通linux服务器,但是打不开服务器的网页

Dbeaver一次执行多条MySQL语句报错_dbeaver执行多条语句报错-程序员宅基地

文章浏览阅读969次。选择驱动属性，将allowMultiQueries设置为TRUE，然后点击确定即可。解决方法，打开编辑选项。_dbeaver执行多条语句报错

炼丹记之国家电投2020风电机组异常数据识别与清洗 baseline f1=0.858分享_2020 ccf 大数据与计算智能大赛风电机组异常数据识别与清洗-程序员宅基地

文章浏览阅读2.9k次，点赞5次，收藏15次。赛题地址：https://www.datafountain.cn/competitions/451赛题任务：依据提供的12台风力电机1年的10min间隔SCADA运行数据，包括时间戳信息、风速信息和功率信息等，利用机器学习相关技术，建立鲁棒的风电机组异常数据检测模型，用于识别并剔除潜在的异常数据，提高数据质量。此任务未给出异常数据标签，视为聚类任务，为引导选手向赛题需求对接，现简单阐述异常数据定义。异常数据是由风机运行过程与设计运行工况出现较大偏离时产生，如风速仪测风异常导致采集的功率散点明显_2020 ccf 大数据与计算智能大赛风电机组异常数据识别与清洗

java学习路线_在整个业务运营系统实施过程中强调:统一标准是基础,数据集成是手段,优化资源是目-程序员宅基地

文章浏览阅读1k次。自己在一个培训机构的网站上面看到java的学习路线，觉得挺好的，分享给大家，希望对大家的学习有所帮助。第一阶段Java语言基础Java语言概述、Java环境配置、基本语法、Java流程控制语句、常用数据结构掌握常见的数据结构和实用算法；培养良好的企业级编程习惯。Java面向对象Java类设计、高级类特性（封装、继承、多态）、异常处理、Java集合、泛_在整个业务运营系统实施过程中强调:统一标准是基础,数据集成是手段,优化资源是目

模型转换 PyTorch转ONNX 入门-程序员宅基地

文章浏览阅读1w次，点赞31次，收藏177次。本文主要介绍如何将PyTorch模型转换为ONNX模型，为后面的模型部署做准备。转换后的xxx.onnx模型，进行加载和测试。最后介绍使用Netron，可视化ONNX模型，看一下网络结构；查看使用了那些算子，以便开发部署。目录前言一、PyTorch模型转ONNX模型1.1 转换为ONNX模型且加载权重1.2 转换为ONNX模型但不加载权重1.3 torch.onnx.export() 函数二、加载ONNX模型三、可视化ONNX模型。_pytorch转onnx

VINS-Mono-IMU预积分（八：预积分代码带读+对应推导公式）_vins中的与积分约束代码-程序员宅基地

文章浏览阅读249次。这个雅可比的作为是为了在零偏 $b_{a},b_{w}$ 在经过优化数值发生变化后不需要再重新进行预积分，因为实际上 $k+1$ 时刻的预积分是用 $k$ 时刻的零偏 $b$ 来进行的，当经过优化后 $k+1$ 时刻的零偏 $b$ 就会发生变化，理论上 $k+1$ 时刻的预积分应该是用 $k+1$ 时刻的零偏 $b$ 来进行才对，由于是优化后才获得，但是重新进行预积分又非常耗时，所以采用 $f(x+Δb)=f(x)+J^{x}_{b}·Δb$ 这样的方式来进行近似更新，从这个公式可以看出里面就必须要对零偏_vins中的与积分约束代码