如何在React项目中使用AntDesign

目录
  • 0.前言
  • 1.AntDesign是什么？
  • 2.AntDesign如何使用？
  • 3.如何具体使用AntDdesign的组件
    • 3-1.如何使用 antd 的Table组件
    • 3-2.如何使用 antd 的Button组件
  • 4.后续

0.前言

我们在后台管理系统React项目开发中会有Table表格、Form表单、List列表、Button按钮等组件，这个时候我们可以使用AntDesign来减少开发中不必要的样式问题。

1.AntDesign是什么？

Ant Design 是一个 UI 设计语言，是一套提炼和应用于企业级后台产品的交互语言和视觉体系

2.AntDesign如何使用？

首先你要安装 yarn或npm或cnpm

$ yarn create react-app antd-demo
# or
$ npx create-react-app antd-demo
# or
$ npm create react-app antd-demo
// 若网络缓慢可使用cnpm淘宝镜像
$ cnpm create react-app antd-demo

工具会自动初始化一个脚手架并安装 React 项目的各种必要依赖

然后我们进入项目并启动。

$ cd antd-demo
$ yarn/npm/cnpm start

此时浏览器会访问 http://localhost:3000/ ，看到 Welcome to React 的界面就算成功了。

而后需要引入AntD

现在从 yarn 或 npm 安装并引入 antd。

$ yarn add antd

3.如何具体使用AntDdesign的组件

通用步骤是，先用import引入antd的具体某一个组件，然后根据规则及API使用

例：

3-1.如何使用 antd 的Table组件

import React from 'react';
import { Table } from 'antd';
import './App.css';

const columns = [
    { title: 'Name',
      dataIndex: 'name',
      key: 'name',
      render: text => <a>{text}</a>,
    },
    {
      title: 'Age',
      dataIndex: 'age',
      key: 'age',
    },
];

const data = [
    {
      key: 1,
      name: 'one',
      age: '10',
    },
    {
      key: 2,
      name: 'two',
      age: '20',
    },
];

const App = () => (
    <div className="App">
        <Table columns={columns} dataSource={data} />
    </div>
    );

export default App;

样式如图：

3-2.如何使用 antd 的Button组件

import React from 'react';
import { Button } from 'antd';

const App = () => (
      <div className="App">
          <Button type="primary">Primary Button</Button><br/>
          <Button>Default Button</Button><br/>
          <Button type="dashed">Dashed Button</Button><br/>
          <Button type="text">Text Button</Button><br/>
          <Button type="link">Link Button</Button><br/>
      </div>
    );

export default App;

4.后续

总结：总体来说要使用ant具体的某一个组件，就要仔细观看组件的API，以API为基准来进行开发。

好处：用Ant开发，省去了写css样式的问题，同时，组件里也有相应的JS方法，便于开发

到此这篇关于如何在React项目中使用AntDesign的文章就介绍到这了,更多相关React使用AntDesign内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • react+ant design实现Table的增、删、改的示例代码

    本人小白一名,第一次学习react ,该资料为本人原创,采用的是react+ant design的Tabled的一个小demo,暂时只实现了增加,删除单行,多行删除有Bug,查看详情,呕心沥血耗时一周完成,禁止抄袭,转载请先留言, 1.main.jsx import React from 'react'; import ReactDom from 'react-dom'; import ExampleTable from './ExampleTable.jsx' ReactDom.render(

  • React Ant Design树形表格的复杂增删改操作

    最近因为业务接触了antd,使用antd完成一个复杂的树形表格的显示以及修改.在这其中遇见了不少坑,很多功能antd只写了初步的功能,更为细化的功能只能自己完善.踩过的坑都写在了这里. 树形表格的显示 在antd中对于表格的key值有着严格的控制,每一个row都必须有一个独一无二的key值,可以是数字也可以是字符串.这一点和我曾经使用过得iview有着很大的区别.react使用key来代表每一行是为了避免重新渲染的问题,这个优化也在实际的开发中带来了不少的问题.比如新建行时需要自定义新key.

  • React+Ant Design开发环境搭建的实现步骤

    React+Ant Design开发环境搭建的实现步骤

    基础知识 1.使用脚手架创建项目并启动 1.1 安装脚手架: npm install -g create-react-app 1.2 使用脚手架创建项目: create-react-app antd-start-demo antd-start-demo为项目名. 1.3 启动 npm start 2.npm转换为yarn 2.1 安装yarn: npm install -g yarn ​ 2.2 获取yarn当前的镜像源: yarn config get registry ​ 2.3 设置为淘宝

  • react ant Design手动设置表单的值操作

    1.设置表单的值 this.props.form.setFieldsValue({ name:"张三", }); 2.清空表单的值 this.props.form.resetFields(); 3.获取某一输入框的值 this.props.form.getFieldValue('newPassword'); 4.获取整个表单的值 this.props.form.getFieldsValue(); 多看官方文档就知道这些东西了 补充知识:react使用antd表单赋值,用于修改弹框 1.

  • 如何在React项目中使用AntDesign

    如何在React项目中使用AntDesign

    目录 0.前言 1.AntDesign是什么? 2.AntDesign如何使用? 3.如何具体使用AntDdesign的组件 3-1.如何使用 antd 的Table组件 3-2.如何使用 antd 的Button组件 4.后续 0.前言 我们在后台管理系统React项目开发中会有Table表格.Form表单.List列表.Button按钮等组件,这个时候我们可以使用AntDesign来减少开发中不必要的样式问题. 1.AntDesign是什么? Ant Design 是一个 UI 设计语言,是

  • 如何在React项目中优雅的使用对话框

    如何在React项目中优雅的使用对话框

    目录 背景 场景一 场景二 场景三 问题一:难以扩展 问题二:维护问题 问题的本质 对话框的本质 全局的状态管理的对话框 整体的架构 具体实现 Redux - reducer 存储 Redux - action 处理对话框的显示隐藏 Hook - useCommonModal 创建对话框-容器模块 对话框返回值处理 运行实例 总结 参考 背景 对话框在前端开发应用中,是一种非常常用的界面模式.对话框作为一个独立的窗口,常常被用于信息的展示,输入信息,亦或者更多其他功能.但是项目的使用过程中,在某

  • 如何在React项目中引入字体文件并使用详解

    如何在React项目中引入字体文件并使用详解

    目录 前言 下面讲下如何引入字体文件并使用 一.下载字体包 二.将字体文件放到项目里 三.使用新字体 总结 前言 在做React项目的时候,发现UI设计给出的设计稿里,某些文字所用的字体,系统默认不支持.比如设计需要的这个字体:EmerlandRegular,即使在css里将文字字体设置为他们,实际效果也显示不出来. <Typography style={{ fontSize:'22px', fontFamily:'EmerlandRegular', textAlign:'center', co

  • 在React项目中使用TypeScript详情

    目录 项目目录及ts文件划分 在项目中使用TypeScript具体实践 组件声明 React Hooks使用 useState useRef useCallback useMemo useContext useReducer useImperativeHandle Axios请求/响应定义封装 前言: 本文主要记录我如何在React项目中优雅的使用TypeScript,来提高开发效率及项目的健壮性. 项目目录及ts文件划分 由于我在实际项目中大部分是使用umi来进行开发项目,所以使用umi生成的

  • 详解如何优雅地在React项目中使用Redux

    前言 或许你当前的项目还没有到应用Redux的程度,但提前了解一下也没有坏处,本文不会安利大家使用Redux 概念 首先我们会用到哪些框架和工具呢? React UI框架 Redux 状态管理工具,与React没有任何关系,其他UI框架也可以使用Redux react-redux React插件,作用:方便在React项目中使用Redux react-thunk 中间件,作用:支持异步action 目录结构 Tips:与Redux无关的目录已省略 |--src |-- store Redux目录

  • 详解如何在Vue项目中导出Excel

    详解如何在Vue项目中导出Excel

    Excel 导出 Excel 的导入导出都是依赖于js-xlsx来实现的. 在 js-xlsx的基础上又封装了Export2Excel.js来方便导出数据. 使用 由于 Export2Excel不仅依赖js-xlsx还依赖file-saver和script-loader. 所以你先需要安装如下命令: npm install xlsx file-saver -S npm install script-loader -S -D 由于js-xlsx体积还是很大的,导出功能也不是一个非常常用的功能,所以

  • 优雅的在React项目中使用Redux的方法

    或许你当前的项目还没有到应用Redux的程度,但提前了解一下也没有坏处 首先我们会用到哪些框架和工具呢? React UI框架 Redux 状态管理工具,与React没有任何关系,其他UI框架也可以使用Redux react-redux React插件,作用:方便在React项目中使用Redux react-thunk 中间件,作用:支持异步action |--src |-- store Redux目录 |-- actions.js |-- index.js |-- reducers.js |-

  • 如何在Maven项目中运行JUnit5测试用例实现

    本文演示了如何如何编写JUnit 5测试用例,在Maven项目中运行JUnit 5测试用例. 编写JUnit 5测试用例 如果你是Java开发者,那么对于JUnit应该就不陌生.JUnit是Java单元测试的基础工具. JUnit目前最新的版本是JUnit 5.x,但广大的Java开发者估计还停留在JUnit 4.x,因此有必要演示下如何编写JUnit 5测试用例. 引入JUnit 5依赖 相比较JUnit 4而言,JUnit 5一个比较大的改变是JUnit 5拥有与JUnit 4不同的全新的A

  • 在react项目中使用antd的form组件,动态设置input框的值

    问题: 创建账号时,输入账号后不搜索直接保存,提示查询后,再点搜索就不能搜索这个账号了 原因: 点击保存之后,对表单进行了验证,导致之后请求的数据无法在更新到input框中,也就是说即使在state中有值,也不会更新initialValue值,就导致搜索后的值不能正确填入input中,表单也就提交不了. 解决办法: 不使用initialValue设置动态更新的值,而是使用 this.props.form.setFieldValue({name:data}); 用于动态更新值,就可以解决了. if

  • 如何在Vue项目中添加接口监听遮罩

    一.业务背景 使用遮罩层来屏蔽用户的非正常操作,是前端经常使用的方式.但是在一些项目中,并没有对遮罩层进行统一管理,这就会造成如下的问题: (1)所有的业务组件都要引入遮罩层组件,也就是每个.vue业务组件,都在template中引入了Mask组件.组件在项目的各个角落都存在,不利于管理,代码极度冗余. (2)Mask组件都分散到业务的各个角落,所以控制是否显示遮罩层的变量也散在业务组件中.比如使用maskShow来控制是否展示遮罩层时,一个较为复杂的项目中会产生200+的maskShow变量.

随机推荐