脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → React → React antd组件

React中使用antd组件的方法

 更新时间：2022年09月05日 16:01:12   作者：Icy Hunter  
antd 是基于 Ant Design 设计体系的 React UI 组件库，主要用于研发企业级中后台产品，这篇文章主要介绍了React中使用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实现一个简单的虚拟列表

    用React实现一个简单的虚拟列表

    虚拟列表是现在比较常用的前端渲染大数据列表的方案,目前也有很多组件库和工具库也都有对应的实现,本文将给大家介绍一下如何用React实现一个简单的虚拟列表,文中通过代码示例讲解的非常详细,需要的朋友可以参考下
    2023-12-12
  • React.Js添加与删除onScroll事件的方法详解

    React.Js添加与删除onScroll事件的方法详解

    这篇文章主要给大家介绍了关于React.Js添加与删除onScroll事件的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧。
    2017-11-11
  • react入门级详细笔记

    react入门级详细笔记

    这篇文章讲述了React的基本介绍,基本使用和React相关js库.通过这篇文章可以入门React的使用,可以快速上手使用React进行代码的编写
    2021-06-06
  • create-react-app如何降低react的版本

    create-react-app如何降低react的版本

    这篇文章主要介绍了create-react-app降低react的版本方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-03-03
  • 详解如何在React组件“外”使用父组件的Props

    详解如何在React组件“外”使用父组件的Props

    这篇文章主要介绍了详解如何在React组件“外”使用父组件的Props，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-01-01
  • react-router4 嵌套路由的使用方法

    react-router4 嵌套路由的使用方法

    本篇文章主要介绍了react-router4 嵌套路由的使用方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-07-07
  • 使用 React 和 Threejs 创建一个VR全景项目的过程详解

    使用 React 和 Threejs 创建一个VR全景项目的过程详解

    这篇文章主要介绍了使用 React 和 Threejs 创建一个VR全景项目的过程详解,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2021-04-04
  • react-dnd API拖拽工具详细用法示例

    react-dnd API拖拽工具详细用法示例

    这篇文章主要为大家介绍了react-dnd API拖拽工具的详细用法示例，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2022-10-10
  • react实现动态表单

    react实现动态表单

    这篇文章主要为大家详细介绍了react实现动态表单，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-08-08
  • 详解React 父组件和子组件的数据传输

    详解React 父组件和子组件的数据传输

    这篇文章主要介绍了React 父组件和子组件的数据传输的相关资料，帮助大家更好的理解和学习使用React，感兴趣的朋友可以了解下
    2021-04-04

最新评论