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...
© 2024 LMLPHP 关于我们 联系我们 友情链接 耗时0.012983(s)
2024-07-22 12:06:43 1721621203