Ant Design Pro 基本语法使用(JavaScript版)

最新推荐文章于 2023-05-22 17:06:06 发布

原创最新推荐文章于 2023-05-22 17:06:06 发布 · 2.2k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #ar #开发语言

Ant Design 专栏收录该内容

14 篇文章

订阅专栏

本文介绍了React中组件的定义及使用方法，展示了如何利用useState进行状态管理，包括bool、string和数组类型的变量创建与更新，并提供了文件上传组件的具体实现案例。

组件的定义

const FirmwareList = () => 
{
//整个页面所有的代码
};
export default FirmwareList;

组件的引入

import { Upload, Form, message, Button, Row, Col } from 'antd';
import { UploadOutlined } from '@ant-design/icons';
import { useState, useRef, useEffect } from 'react';
import { useIntl } from 'umi';
import { PageContainer } from '@ant-design/pro-layout';
import ProTable from '@ant-design/pro-table';
import ProForm, { ProFormText, ModalForm, ProFormSelect } from '@ant-design/pro-form';
import { setEquipmentWorkMode } from '@/services/equipment/equipment';

数组变量带默认值的创建

const [columnsStateMap, setColumnsStateMap] = useState({
  jsonData: {
    show: false,
  },
});

bool变量创建和赋值

const [showWorkModeVisible, setShowWorkModeVisible] = useState(false);
赋值，showWorkModeVisible为const不能进行赋值
setShowWorkModeVisible(true);

string变量创建和赋值

const [deviceIdState, setDeviceIdState] = useState(String);
setDeviceIdState('123456');

数组变量创建和赋值

const [fileListState, setFileListState] = useState([]);
//这个有些区别，通过fileListState赋值就可以
fileListState.push(file);
//删除数组里的内容
const remove = (file) => {
  try {
    const index = fileListState.indexOf(file);
    const newFileList = fileListState.slice();
    newFileList.splice(index, 1);
    setFileListState(newFileList), console.log(file);
    console.log(file);
  } catch (error) {
    message.error(error);
    return false;
  }
};