React中使用antd组件的方法.docxVIP

第

React中使用antd组件的方法

目录antd使用antd

antd

antd是基于AntDesign设计体系的ReactUI组件库，主要用于研发企业级中后台产品。

国内镜像为：https://ant-design.gitee.io/docs/react/introduce-cn

速度很快

进入网页点击组件就可以看到网页需要的各种配件，如按钮、导航栏等等，并且配有各种使用方法的API，目前已经更新到4.22版本，原本是只支持react不过后来也支持vue了。

3.几版本的文档说明会更加详细

antd还可以更改主题颜色，按需引入组件的css，不过得小小操作一下，以后需要了再来补。

这里就简单展示一下antd的使用。

使用antd

首先需要安装antd

yarnaddantd

即可

进入组件选一个比较好看的组件，比如我觉得这个导航栏不错。

然后copy代码就行了。

点击显示代码

然后选择js的代码，copy到App组件就行了。

App.js:

import{

AppstoreOutlined,

ContainerOutlined,

DesktopOutlined,

MailOutlined,

MenuFoldOutlined,

MenuUnfoldOutlined,

PieChartOutlined,

}from@ant-design/icons;

import{Button,Menu}fromantd;

importReact,{useState}fromreact;

functiongetItem(label,key,icon,children,type){

return{

key,

icon,

children,

label,

type,

constitems=[

getItem(Option1,1,PieChartOutlined/),

getItem(Option2,2,DesktopOutlined/),

getItem(Option3,3,ContainerOutlined/),

getItem(NavigationOne,sub1,MailOutlined/,[

getItem(Option5,5),

getItem(Option6,6),

getItem(Option7,7),

getItem(Option8,8),

getItem(NavigationTwo,sub2,AppstoreOutlined/,[

getItem(Option9,9),

getItem(Option10,10),

getItem(Submenu,sub3,null,[getItem(Option11,11),getItem(Option12,12)]),

constApp=()={

const[collapsed,setCollapsed]=useState(false);

consttoggleCollapsed=()={

setCollapsed(!collapsed);

return(

primary

toggleCollapsed}

1]}

defaultOpenKeys={[sub1]}

mode=inline

theme=dark

inlineCollapsed={collapsed}

items={items}

/div

exportdefaultApp;

index.js中还需要引入antd自己的样式

importReactfromreact

importReactDOMfromreact-dom

importAppfrom./App

importantd/dist/antd.min.css

ReactDOM.render(App/,document.getElementById(root))

然后启动脚手架

npmstart

这样就引入成功了。

但是美中不足的就是大小有点不爽

我想让他全屏。

f12打开开发者工具