React使用antd

antd

antd是AntDesign的简称，它是基于 Ant Design 设计体系的 React UI 组件库，主要用于研发企业级中后台产品。

国外镜像：https://ant.design/docs/react/introduce-cn

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

国内的反应会更快些。

 对于我们前端开发者来说，需要了解antd得到组件部分，还有它如何使用到React组件中的部分。

 React中使用antd

1.首先需要安装antd，进入我们的项目文件打开终端输入。

yarn add antd

当然也可以使用npm命令，但比较推荐使用yarn，为什么呢？因为yarn更好用。

2.紧接着就是引入样式，只需引入一次即可。

在跟文件index.js文件里加上

import 'antd/dist/reset.css';

或是在App.css里加上

@import '~antd/dist/antd.css';

3.下面我们可以开始使用组件了，这里我们选择了下拉菜单，我们选择第一个，看见下方的<>可以点击一下然后选择你需要的代码（ts/js）,在这里我们选择了JavaScript

 

 下面变色复制代码了

import React from 'react';
import { DownOutlined, SmileOutlined } from '@ant-design/icons';
import { Dropdown, Space } from 'antd';

function Home() {
    const items = [
        {
          key: '1',
          label: (
            <a target="_blank" rel="noopener noreferrer" href="https://www.antgroup.com">
              1st menu item
            </a>
          ),
        },
        {
          key: '2',
          label: (
            <a target="_blank" rel="noopener noreferrer" href="https://www.aliyun.com">
              2nd menu item (disabled)
            </a>
          ),
          icon: <SmileOutlined />,
          disabled: true,
        },
        {
          key: '3',
          label: (
            <a target="_blank" rel="noopener noreferrer" href="https://www.luohanacademy.com">
              3rd menu item (disabled)
            </a>
          ),
          disabled: true,
        },
        {
          key: '4',
          danger: true,
          label: 'a danger item',
        },
      ];

  return (
    <div className="Home">
      <Dropdown
    menu={{
      items,
    }}
  >
    <a onClick={(e) => e.preventDefault()}>
      <Space>
        Hover me
        <DownOutlined />
      </Space>
    </a>
  </Dropdown>

    </div>
  );
}

export default Home;

运行代码

yarn start

这样便出来antd中的样子了

andt技巧

快速查找你想要的组件功能

还以下拉菜单为例，右侧有组件的功能介绍，点击便可滑到组件的位置

如果某个组件里只用你想要的部分功能，向下滑动参考API里面有组件封装好的属性参数，都有其介绍供你使用。