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

Posted 2021-12-04 シ゛甜虾

组件的定义

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;
  }
};