快捷導(dǎo)航

React中使用antd組件的方法

更新時(shí)間：2022年09月05日 16:01:12 作者：Icy?Hunter

antd?是基于?Ant?Design?設(shè)計(jì)體系的?React?UI?組件庫，主要用于研發(fā)企業(yè)級(jí)中后臺(tái)產(chǎn)品，這篇文章主要介紹了React中使用antd組件,需要的朋友可以參考下

antd

antd 是基于 Ant Design 設(shè)計(jì)體系的 React UI 組件庫，主要用于研發(fā)企業(yè)級(jí)中后臺(tái)產(chǎn)品。

國內(nèi)鏡像為：https://ant-design.gitee.io/docs/react/introduce-cn
速度很快

進(jìn)入網(wǎng)頁點(diǎn)擊組件就可以看到網(wǎng)頁需要的各種配件，如按鈕、導(dǎo)航欄等等，并且配有各種使用方法的API，目前已經(jīng)更新到4.22版本，原本是只支持react不過后來也支持vue了。
3.幾版本的文檔說明會(huì)更加詳細(xì)
antd還可以更改主題顏色，按需引入組件的css，不過得小小操作一下，以后需要了再來補(bǔ)。
這里就簡單展示一下antd的使用。

使用antd

首先需要安裝antd

yarn add antd

即可

進(jìn)入組件選一個(gè)比較好看的組件，比如我覺得這個(gè)導(dǎo)航欄不錯(cuò)。

然后copy代碼就行了。

點(diǎn)擊顯示代碼

然后選擇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'))

然后啟動(dòng)腳手架

npm start

這樣就引入成功了。
但是美中不足的就是大小有點(diǎn)不爽
我想讓他全屏。
f12打開開發(fā)者工具

發(fā)現(xiàn)可能是root div太小了

設(shè)置成100%但是還是不行

里面那個(gè)div設(shè)置100%還是不行

終于，ul設(shè)置一下就可以了。
那么按上面的步驟代碼里改下樣式就行了
要改的地方如下：

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;

刷新頁面