React中使用antd组件的方法
目录
- antd
- 使用antd
antd
antd 是基于 Ant Design 设计体系的 React UI 组件库，主要用于研发企业级中后台产品。
国内镜像为：https://ant-design.gitee.io/docs/react/introduce-cn
速度很快
进入网页点击组件就可以看到网页需要的各种配件，如按钮、导航栏等等，并且配有各种使用方法的API，目前已经更新到4.22版本，原本是只支持react不过后来也支持vue了。
3.几版本的文档说明会更加详细
antd还可以更改主题颜色，按需引入组件的css，不过得小小操作一下，以后需要了再来补。
这里就简单展示一下antd的使用。
使用antd
首先需要安装antd
yarn add antd
即可
进入组件选一个比较好看的组件，比如我觉得这个导航栏不错。
然后copy代码就行了。
点击显示代码
然后选择js的代码，copy到App组件就行了。
App.js:
import {
AppstoreOutlined,
ContainerOutlined,
DesktopOutlined,
MailOutlined,
MenuFoldOutlined,
MenuUnfoldOutlined,
PieChartOutlined,
} from '@ant-design/icons';
import { Button, Menu } from 'antd';
import React, { useState } from 'react';
function getItem(label, key, icon, children, type) {
return {
key,
icon,
children,
label,
type,
};
}
const items = [
getItem('Option 1', '1', <PieChartOutlined />),
getItem('Option 2', '2', <DesktopOutlined />),
getItem('Option 3', '3', <ContainerOutlined />),
getItem('Navigation One', 'sub1', <MailOutlined />, [
getItem('Option 5', '5'),
getItem('Option 6', '6'),
getItem('Option 7', '7'),
getItem('Option 8', '8'),
]),
getItem('Navigation Two', 'sub2', <AppstoreOutlined />, [
getItem('Option 9', '9'),
getItem('Option 10', '10'),
getItem('Submenu', 'sub3', null, [getItem('Option 11', '11'), getItem('Option 12', '12')]),
]),
];
const App = () => {
const [collapsed, setCollapsed] = useState(false);
const toggleCollapsed = () => {
setCollapsed(!collapsed);
};
return (
<div
style={{
width: 256,
}}
>
<Button
type="primary"
onClick={toggleCollapsed}
style={{
marginBottom: 16,
}}
>
{collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
</Button>
<Menu
defaultSelectedKeys={['1']}
defaultOpenKeys={['sub1']}
mode="inline"
theme="dark"
inlineCollapsed={collapsed}
items={items}
/>
</div>
);
};
export default App;
index.js中还需要引入antd自己的样式
import React from 'react'
import ReactDOM from 'react-dom'
import App from "./App"
import "antd/dist/antd.min.css"
ReactDOM.render(<App/>,document.getElementById('root'))
然后启动脚手架
npm start
这样就引入成功了。
但是美中不足的就是大小有点不爽
我想让他全屏。
f12打开开发者工具
发现可能是root div太小了
设置成100%但是还是不行
里面那个div设置100%还是不行
终于，ul设置一下就可以了。
那么按上面的步骤代码里改下样式就行了
要改的地方如下：
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="root" style="height:100%"></div>
</body>
</html>
App.js:
import {
AppstoreOutlined,
ContainerOutlined,
DesktopOutlined,
MailOutlined,
MenuFoldOutlined,
MenuUnfoldOutlined,
PieChartOutlined,
} from '@ant-design/icons';
import { Button, Menu } from 'antd';
import React, { useState } from 'react';
function getItem(label, key, icon, children, type) {
return {
key,
icon,
children,
label,
type,
};
}
const items = [
getItem('Option 1', '1', <PieChartOutlined />),
getItem('Option 2', '2', <DesktopOutlined />),
getItem('Option 3', '3', <ContainerOutlined />),
getItem('Navigation One', 'sub1', <MailOutlined />, [
getItem('Option 5', '5'),
getItem('Option 6', '6'),
getItem('Option 7', '7'),
getItem('Option 8', '8'),
]),
getItem('Navigation Two', 'sub2', <AppstoreOutlined />, [
getItem('Option 9', '9'),
getItem('Option 10', '10'),
getItem('Submenu', 'sub3', null, [getItem('Option 11', '11'), getItem('Option 12', '12')]),
]),
];
const App = () => {
const [collapsed, setCollapsed] = useState(false);
const toggleCollapsed = () => {
setCollapsed(!collapsed);
};
return (
<div
style={{
width: 256,
height: '100%'
}}
>
<Button
type="primary"
onClick={toggleCollapsed}
style={{
marginBottom: 16,
}}
>
{collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
</Button>
<Menu
defaultSelectedKeys={['1']}
defaultOpenKeys={['sub1']}
mode="inline"
theme="dark"
inlineCollapsed={collapsed}
items={items}
style={{height:'100%'}}
/>
</div>
);
};
export default App;
刷新页面
是想要的效果。
到此这篇关于React中使用antd组件的方法的文章就介绍到这了,更多相关React antd组件内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
相关推荐
-
react使用antd的上传组件实现文件表单一起提交功能(完整代码)
最近在刚刚开始使用react做项目,非常不熟练,非常小白.小白同学可以阅读了,因为我会写的非常简单,直白. 项目中需要实现表单中带附件提交,上传文件不单独保存调接口. import { Form, Button, Upload } from 'antd'; import { UploadOutlined } from '@ant-design/icons'; const normFile = (e) => { console.log('Upload event:', e); if (Array.
-
在react-antd中弹出层form内容传递给父组件的操作
我就废话不多说了,大家还是直接看代码吧~ 子组件: // jshint esversion:6 import React, { Component } from 'react'; import { Form, Input} from 'antd'; const FormItem = Form.Item; class Forms extends Component{ getItemsValue = ()=>{ //3.自定义方法,用来传递数据(需要在父组件中调用获取数据) const values
-
在react项目中使用antd的form组件,动态设置input框的值
问题: 创建账号时,输入账号后不搜索直接保存,提示查询后,再点搜索就不能搜索这个账号了 原因: 点击保存之后,对表单进行了验证,导致之后请求的数据无法在更新到input框中,也就是说即使在state中有值,也不会更新initialValue值,就导致搜索后的值不能正确填入input中,表单也就提交不了. 解决办法: 不使用initialValue设置动态更新的值,而是使用 this.props.form.setFieldValue({name:data}); 用于动态更新值,就可以解决了. if
-
React如何利用Antd的Form组件实现表单功能详解
一.构造组件 1.表单一定会包含表单域,表单域可以是输入控件,标准表单域,标签,下拉菜单,文本域等. 这里先引用了封装的表单域 <Form.Item /> 2.使用Form.create处理后的表单具有自动收集数据并校验的功能,但如果不需要这个功能,或者默认的行为无法满足业务需求,可以选择不使用Form.create并自行处理数据 经过Form.create()包装过的组件会自带this.props.form属性,this.props.form提供了很多API来处理数据,如getFieldDe
-
React antd tabs切换造成子组件重复刷新
描述: Tabs组件在来回切换的过程中,造成TabPane中包含的相同子组件重复渲染,例如: <Tabs activeKey={tabActiveKey} onChange={(key: string) => this.changeTab(key)} type="card" > <TabPane tab={"对外授权"} key="/authed-by-me"> <AuthedCollections colle
-
React UI组件库之快速实现antd的按需引入和自定义主题
目录 React UI组件库 流行的开源React UI组件库 antd的基本使用 antd样式按需引入 antd自定义主题 总结 React UI组件库 流行的开源React UI组件库 material-ui(国外) ant-design(国内蚂蚁金服) antd的基本使用 antd 是基于 Ant Design 设计体系的 React UI 组件库,主要用于研发企业级中后台产品. 安装antd组件库: npm install antd --save yarn add antd 默认按需引入
-
react配合antd组件实现的管理系统示例代码
前言:此文需要有一定react,redux基础,具体学习资料请科学上网. 使用create-react-app脚手架 具体基础配置请参考 配合antd组件实现的管理系统demo,线上地址 开发前反思 1. 按需加载 webpack的 import 动态加载的模块的函数,import(参数),参数为模块地址. 注意: import 后会返回一个promise对象. import('/components/chart').then(mud => { dosomething(mod) }); 本dem
-
React中使用antd组件的方法
目录 antd 使用antd antd antd 是基于 Ant Design 设计体系的 React UI 组件库,主要用于研发企业级中后台产品. 国内镜像为:https://ant-design.gitee.io/docs/react/introduce-cn速度很快 进入网页点击组件就可以看到网页需要的各种配件,如按钮.导航栏等等,并且配有各种使用方法的API,目前已经更新到4.22版本,原本是只支持react不过后来也支持vue了.3.几版本的文档说明会更加详细antd还可以更改主题颜色
-
react中使用antd及immutable示例详解
目录 一.react中使用antd组件库 二.Immutable 2.1 深拷贝和浅拷贝的关系 2.2 immutable优化性能方式 2.3 immutable的Map使用 2.4 immutable的List使用 2.5 实际场景formJS 三.redux中使用immutable 一.react中使用antd组件库 运行命令create-react-app antd-react创建新项目: 运行命令npm i antd安装: 使用: import React from 'react' im
-
深入理解React中es6创建组件this的方法
首发于:https://mingjiezhang.github.io/. 在JavaScript中,this对象是运行时基于函数的执行环境(也就是上下文)绑定的. 从react中的demo说起 Facebook最近一次更新react时,将es6中的class加入了组件的创建方式当中.Facebook也推荐组件创建使用通过定义一个继承自 React.Component 的class来定义一个组件类.官方的demo: class LikeButton extends React.Component
-
React中的权限组件设计问题小结
目录 背景 所谓的权限控制是什么? 实现思路 路由权限 菜单权限 背景 权限管理是中后台系统中常见的需求之一.之前做过基于 Vue 的后台管理系统权限控制,基本思路就是在一些路由钩子里做权限比对和拦截处理. 最近维护的一个后台系统需要加入权限管理控制,这次技术栈是React,我刚开始是在网上搜索一些React路由权限控制,但是没找到比较好的方案或思路. 这时想到ant design pro内部实现过权限管理,因此就专门花时间翻阅了一波源码,并在此基础上逐渐完成了这次的权限管理. 整个过程也是遇到
-
在ABP框架中使用BootstrapTable组件的方法
一.关于ABP ABP是"ASP.NET Boilerplate Project (ASP.NET样板项目)"的简称,它是一个成熟的开源框架,基于DDD+Repository模式,自带Zero权限和认证模块,避免了从零开始搭建框架的烦恼.关于ABP的框架优势就此打住,因为这样说下去要说三天三夜,脱离文本主题. 关于ABP的入门,博主不想说太多,园子里面tkb至简和阳光铭睿有很多入门级的文章,有兴趣的可以了解下,还是给出它的官网和开源地址. ABP官方网站:http://www.aspn
-
浅析React中的受控组件和非受控组件
非受控组件 表单数据由DOM本身处理.即不受setState()的控制,与传统的HTML表单输入相似,input输入值即显示最新值(使用 ref从DOM获取表单值) 1.非受控组件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body&g
-
Vue3中10多种组件通讯方法小结
目录 Props emits expose / ref Non-Props 单个根元素的情况 多个元素的情况 v-model 单值的情况 多个 v-model 绑定 v-model 修饰符 插槽 slot 默认插槽 具名插槽 作用域插槽 provide / inject 总线 bus getCurrentInstance Vuex State Getter Mutation Action Module Pinia 安装 注册 mitt.js 安装 使用 本文讲解 Vue 3.2 组件多种通讯方式
-
react 创建单例组件的方法
需求背景 最近有个需求,需要在项目中添加一个消息通知弹窗,告知用户一些信息. 用户看过消息后,就不再弹窗了. 问题 很明显,这个需要后端的介入,提供相应的接口(这样可扩展性更好). 在开发过程中,遇到个问题:由于我们的系统是多页面的,所以每次切换页面,都会去请求后端的消息接口..有一定的性能损耗. 因为是多页面系统,使用单例组件貌似也没啥意义(不过是个机会学习学习单例组件是怎么写的). 于是,想到使用浏览器缓存来记录是否弹过窗了(当然,得设定过期时间). 如何写单例组件 1.工具函数: impo
-
React中jquery引用的实现方法
在React中引用Jquery比较好玩,获取元素的数据更多 1.引入方法举例: import $ from 'jquery'; import { Button } from 'antd'; class testJquery extends React.Component { constructor(props) { super(props); this.selectElement = this.selectElement.bind(this); } render() { return( <div
-
React Native 图片查看组件的方法
React Native 图片查看组件:react-native-image-viewer,纯JS组件,小巧快速的图标查看组件.支持图片放大缩小,支持图片加载失败设置替代图片,支持将图片保存到本地等功能. 效果图 安装方法 npm i react-native-image-zoom-viewer --save 使用示例 const images = [ { url: 'https://avatars2.githubusercontent.com/u/7970947?v=3&s=460', },