React使用UI(Ant Design)框架的详细过程

npm install antd --save

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，路由/，当前的用户信息是"
          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="当前用户信息"
        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;