快捷導(dǎo)航

React使用UI(Ant?Design)框架的詳細(xì)過程

更新時間：2023年12月15日 10:54:31 作者：Etc.End

Ant?Design主要用于中后臺系統(tǒng)的使用,它提供了豐富的組件和工具,可以幫助開發(fā)人員快速構(gòu)建出美觀、易用的界面,同時,Ant?Design還提供了詳細(xì)的文檔和示例,方便開發(fā)者學(xué)習(xí)和使用,這篇文章主要介紹了React使用UI（Ant?Design）框架,需要的朋友可以參考下

一、專欄介紹

歡迎加入本專欄！本專欄將引領(lǐng)您快速上手React，讓我們一起放棄放棄的念頭，開始學(xué)習(xí)之旅吧！我們將從搭建React項目開始，逐步深入講解最核心的hooks，以及React路由、請求、組件封裝以及UI（Ant Design）框架的使用。讓我們一起掌握React，開啟前端開發(fā)的全新篇章！

二、Ant Design

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

Ant Design是螞蟻金服團(tuán)隊推出的一款企業(yè)級UI設(shè)計語言和React組件庫，旨在為開發(fā)者和設(shè)計師提供更優(yōu)秀、更完整的設(shè)計解決方案。它能夠滿足現(xiàn)代企業(yè)復(fù)雜的設(shè)計需求，以細(xì)致和完整的將用戶體驗融入服務(wù)里，從而實(shí)現(xiàn)極致的交互效果和服務(wù)質(zhì)量。

Ant Design主要用于中后臺系統(tǒng)的使用，它提供了豐富的組件和工具，可以幫助開發(fā)人員快速構(gòu)建出美觀、易用的界面。同時，Ant Design還提供了詳細(xì)的文檔和示例，方便開發(fā)者學(xué)習(xí)和使用。

總的來說，Ant Design是一款非常優(yōu)秀的UI設(shè)計和開發(fā)工具，可以幫助企業(yè)和開發(fā)者提高工作效率和質(zhì)量。

三、安裝依賴

npm install antd --save

四、使用

在React中使用UI組件通常比在Vue中更為直接和簡便。當(dāng)我們在React中安裝好Ant Design UI框架后，我們可以在組件內(nèi)部直接引用和使用這些組件，無需像在Vue中那樣進(jìn)行額外的注冊和引入。這種簡潔的組件使用方式使得開發(fā)過程更加高效，減少了不必要的步驟，使得開發(fā)人員能夠更快地構(gòu)建出用戶界面。

import React from 'react';
import { useAppSelector } from '../../hooks/useAppSelector';
import { selectUserInfo } from '../../store/userInfo';
import { Alert, Button, Descriptions, DescriptionsProps, message } from 'antd';
const Home: React.FC = () => {
  const userInfo = useAppSelector((state) => state.userInfo);
  const items: DescriptionsProps['items'] = [
    {
      key: '1',
      label: '姓名',
      children: <span>{userInfo.name}</span>,
    },
    {
      key: '2',
      label: '年齡',
      children: <span>{userInfo.age}</span>,
    },
  ];
  return (
    <>
      <div
        style={{
          width: '100%',
          height: '100%',
        }}
      >
        <Alert
          message="Success Tips"
          description="這里是首頁Home，路由/，當(dāng)前的用戶信息是"
          type="success"
          showIcon
        />
        <Descriptions title="User Info" items={items} />
        <Button
          type={'primary'}
          onClick={async () => {
            message.success('成功獲取用戶信息');
            console.log('??????-----------------', selectUserInfo({ userInfo }).name);
          }}
        >
          獲取用戶信息的name
        </Button>
      </div>
    </>
  );
};
export default Home;

import React from 'react';
import { useAppSelector } from '../hooks/useAppSelector';
import { useAppDispatch } from '../hooks/useAppDispatch';
import { initWhole, updateAge, updateName, updateWhole } from '../store/userInfo';
import { Button, Descriptions, DescriptionsProps, Space } from 'antd';
const ReduxDemo: React.FC = () => {
  const userInfo = useAppSelector((state) => state.userInfo);
  const dispatch = useAppDispatch();
  const items: DescriptionsProps['items'] = [
    {
      key: '1',
      label: '姓名',
      children: <span>{userInfo.name}</span>,
    },
    {
      key: '2',
      label: '年齡',
      children: <span>{userInfo.age}</span>,
    },
  ];
  return (
    <>
      <div>
        <Descriptions items={items} />
        <Space>
          <Button type={'primary'} onClick={() => dispatch(initWhole())}>
            初始化用戶信息
          </Button>
          <Button type={'primary'} onClick={() => dispatch(updateWhole({ name: '王五', age: 23 }))}>
            更改用戶信息
          </Button>
          <Button type={'primary'} onClick={() => dispatch(updateName('張三'))}>
            更改名稱
          </Button>
          <Button type={'primary'} onClick={() => dispatch(updateAge(26))}>
            更改年齡
          </Button>
        </Space>
      </div>
    </>
  );
};
export default ReduxDemo;

五、使用表單

import React from 'react';
import { useAppSelector } from '../hooks/useAppSelector';
import { useAppDispatch } from '../hooks/useAppDispatch';
import { updateName } from '../store/userInfo';
import { Button, Checkbox, Descriptions, DescriptionsProps, Form, Input, Space } from 'antd';
const ReduxDemo: React.FC = () => {
  const userInfo = useAppSelector((state) => state.userInfo);
  const dispatch = useAppDispatch();
  type FieldType = {
    name: string;
    password?: string;
    remember?: string;
  };
  const items: DescriptionsProps['items'] = [
    {
      label: '用戶名',
      children: <span>{userInfo.name}</span>,
    },
    {
      label: '年齡',
      children: '28',
    },
  ];
  return (
    <>
      <Descriptions
        title="當(dāng)前用戶信息"
        bordered
        column={{ xs: 1, sm: 2, md: 3, lg: 3, xl: 4, xxl: 4 }}
        items={items}
      />
      <Form<FieldType>
        name="basic"
        labelCol={{ span: 8 }}
        wrapperCol={{ span: 16 }}
        style={{ maxWidth: 600 }}
        initialValues={{ remember: true }}
        onFinish={(values) => {
          console.log('??????-----------------', values);
          dispatch(updateName(values.name));
        }}
        onFinishFailed={(errorInfo) => {
          console.log('??????-----------------', errorInfo);
        }}
        autoComplete="off"
      >
        <Form.Item<FieldType>
          label="用戶名"
          name="name"
          rules={[{ required: true, message: '請輸入用戶名!' }]}
        >
          <Input />
        </Form.Item>
        <Form.Item<FieldType>
          label="密碼"
          name="password"
          rules={[{ required: true, message: '請輸入密碼!' }]}
        >
          <Input.Password />
        </Form.Item>
        <Form.Item<FieldType>
          name="remember"
          valuePropName="checked"
          wrapperCol={{ offset: 8, span: 16 }}
        >
          <Checkbox>記住我</Checkbox>
        </Form.Item>
        <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
          <Space>
            <Button type="primary" htmlType="submit">
              提交
            </Button>
            <Button type="primary" htmlType="reset">
              重置
            </Button>
          </Space>
        </Form.Item>
      </Form>
    </>
  );
};
export default ReduxDemo;

六、總結(jié)

Ant Design還是是很重要的。它是一個成熟的前端框架，提供了豐富的組件庫，包括按鈕、表單、表格、圖標(biāo)、菜單、對話框等等，可以滿足各種常見的界面需求。此外，它還支持國際化，可以根據(jù)不同的語言和地區(qū)自動切換組件的文本和樣式。因此，對于前端開發(fā)人員來說，學(xué)習(xí)Ant Design是非常有必要的。它可以幫助你提高開發(fā)效率和質(zhì)量，打造出令用戶滿意的前端應(yīng)用。同時，Ant Design的活躍社區(qū)和豐富的案例教程也可以幫助你學(xué)習(xí)和交流。

本專欄的學(xué)習(xí)旅程已暫時告一段落，接下來，我們將開啟全新的React進(jìn)階之旅。在這個過程中，我們將深入學(xué)習(xí)使用Umi Max框架，同時掌握Ant Design Pro模板的使用精髓。對于僅僅是React初學(xué)者的你，也無需擔(dān)憂，因為接下來的專欄內(nèi)容將寫得深入淺出，注重實(shí)踐，以確保每位讀者都能輕松理解并掌握。期待與你共同探索React的更多精彩之處！

到此這篇關(guān)于React使用UI(Ant Design)框架的文章就介紹到這了,更多相關(guān)React使用UI框架內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: