React Portals
简介 React Portal 可以将组件渲染到dom树的不同位置，同时可以渲染到任意父级元素，可以实现漂浮层功能。 使用样例 本篇文章通过React Portals实现对话框，下面将会给出具体实现。 protal组件 Portal.jsx import {useState} from "react";import ReactDOM from "react-dom";im...
React之自定义路由组件
开篇 react router功能很强大，可以根据路径配置对应容器组件。做到组件的局部刷新，接下来我会基于react实现一个简单的路由组件。 代码 自定义路由组件 import {useEffect, useState} from "react";import React from 'react'// 路由配置export const MyRouter = ({children})=>...
React Admin 前端脚手架之ant-design-pro
文章目录 一、React Admin 前端脚手架选型 二、React Admin 前端脚手架之ant-design-pro 三、ant-design-pro使用步骤 四、调试主题 五、常用总结（持续更新） EditableProTable组件 常用组件 EditableProTable组件 编辑某行后，保存时候触发发送请求 EditableProTable组件，添加记录提醒：只能同时编辑一行 Editab...
react useEffect
文章目录 react useEffect什么是 react useEffectdemo: 使用useEffect从后台获取版本信息 react useEffect 什么是 react useEffect useEffect 是 React Hooks 中非常重要的一个 Hook。它的名称来源于 Effect 这个词,之所以这么命名,是因为它可以让你在函数组件中执行副作用操作。 副作用是指除了返回函数结果之...
【React系列】ES6学习笔记（四）module、编程风格
代码可能不会得到预期结果。 require('core-js/modules/es6.symbol');require('core-js/modules/es6.promise');import React from 'React'; 5. 模块的整体加载 除了指定加载某个输出值，还可以使用整体加载，即用星号（*）指定一个对象，所有输出值都加载在这个对象上面。 下面是一个circle.js文件，它输出两...
【React系列】ES6学习笔记（二）Promise、async\await
Promise 对象 1. Promise 的含义 Promise 是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理和更强大。它由社区最早提出和实现，ES6 将其写进了语言标准，统一了用法，原生提供了 Promise 对象。 所谓 Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。从语法上说，Promise 是一个对象，从它可以获取异步...
React 实现拖放功能
介绍 本篇文章将会使用react实现简单拖放功能。 样例 布局拖放 LayoutResize.js import React, {useState} from "react";import { Button } from "antd";import "./LayoutResize.css"; export const LayoutResize = () => { const [state...
React之useRef hook
介绍 useRef是react的自定义hook，它用来引用一个不需要渲染的值。这篇文章会介绍useRef的简单用法。 使用场景 1.实现节流 通过useRef实现节流功能，在限制时间内多次提交，已第一次提交为准。 useThrottle.jsx import {useEffect, useRef, useState} from "react"; import {useEffe...
react 基于Ant Desgin Upload简单实现导入 导出功能
效果图： 导入： 导出： 导入代码： const propsConfig = { name: 'file', action: importDataExcelApi, //后端接口 headers: { authorization: 'authorization-text', loginUserId: sessionStorage.getItem('userLogin') ? JSON.parse(sessi...
【React系列】ES6学习笔记（三）Class
Class 的基本语法 1. 类的由来 JavaScript 语言中，生成实例对象的传统方法是通过构造函数。下面是一个例子。 function Point(x, y) { this.x = x; this.y = y;} Point.prototype.toString = function () { return '(' + this.x + ', ' + this.y + ')';}; var p...