您现在的位置是：网站首页> 编程资料编程资料

React中使用antd组件的方法_React_

2023-05-24 407人已围观

简介 React中使用antd组件的方法_React_

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', ), getItem('Option 2', '2', ), getItem('Option 3', '3', ), getItem('Navigation One', 'sub1', , [ getItem('Option 5', '5'), getItem('Option 6', '6'), getItem('Option 7', '7'), getItem('Option 8', '8'), ]), getItem('Navigation Two', 'sub2', , [ 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 ( 
 ); }; 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(,document.getElementById('root'))

然后启动脚手架

npm start

这样就引入成功了。
但是美中不足的就是大小有点不爽
我想让他全屏。
f12打开开发者工具

发现可能是root div太小了

设置成100%但是还是不行

里面那个div设置100%还是不行

终于，ul设置一下就可以了。
那么按上面的步骤代码里改下样式就行了
要改的地方如下：

index.html:

Document

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', ), getItem('Option 2', '2', ), getItem('Option 3', '3', ), getItem('Navigation One', 'sub1', , [ getItem('Option 5', '5'), getItem('Option 6', '6'), getItem('Option 7', '7'), getItem('Option 8', '8'), ]), getItem('Navigation Two', 'sub2', , [ 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 ( 
 ); }; export default App;

刷新页面

是想要的效果。

到此这篇关于React中使用antd组件的方法的文章就介绍到这了,更多相关React antd组件内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持！

您可能感兴趣的文章:

上一篇：vue3 中使用 jsx 开发的详细过程_vue.js_

下一篇：Vue读取本地静态文件json的2种方法以及优缺点_vue.js_

相关内容

点击排行

本栏推荐

猜你喜欢

-六神源码网