面包屑 面包react antd

react实现导出文件,导出文件格式为json或excel格式

1.导出文件为json文件 下载 file-saver 模块 import { saveAs } from 'file-saver';注:data代表请求的数据 格式为[{},{},{}...] //导出 const handleExport = async () => { let { data } ......
格式 文件 react excel json

基于antd-input & tsx封装一个按固定位数、固定符号分隔内容的输入框

/** * 可在每四位字符间插入一个空格的输入框 */ import { Input } from 'antd'; import { useEffect } from 'react'; const InputGap = (props: any) => { const { useGap, value, ......
位数 antd-input 符号 内容 input

React h5架构

# 目录 - [目录](#目录) - [初始化项目架构](#初始化项目架构) - [React h5架构](#react-h5架构) - [工具](#工具) - [技术栈](#技术栈) - [搭建流程](#搭建流程) - [一、Vite构建项目](#一vite构建项目) - [二、添加 git](# ......
架构 React

TSINGSEE青犀视频汇聚平台EasyCVR视频广场面包屑侧边栏支持拖拽操作

智能视频监控平台EasyCVR能在复杂的网络环境中,将海量设备实现集中统一接入与汇聚管理,实现视频的处理与分发、录像与存储、按需调阅、平台级联等。 ......
面包屑 侧边 视频 面包 TSINGSEE

react使用tailwind.css

> Tailwind CSS 是一个功能类优先的 CSS 框架,它集成了诸如 flex,pt-4,text-center和 rotate-90 这样的类,它们能直接在脚本标记语言中组合起来,构建出任何设计。官网:https://tailwindcss.com/ ## 1.安装 - 以 vite + ......
tailwind react css

在AntD的table里面实现点击按钮跳转路由

需求:在AntD的table组件的操作栏里面,实现点击按钮跳转到路由指定路由,并携带参数 方法1: ``` // 引入 import { useHistory } from "react-router-dom"; // 处理逻辑 let history = useHistory(); const o ......
路由 按钮 table AntD

React—01—基本学习

React 组件是返回标签的 JavaScript 函数: 哪个组件是通过改变 state 实现可响应的,或者哪个组件拥有 这个 state。 然后我们需要确定吧这个state是放在这个组件,还是放在父组件(如何多个子组件都会受到相同state影响,那么需要放到父组件里统一管理)。 如何安装一个re ......
React

antd upload vue3 取消请求,取消进行中的接口请求

在使用antd upload组件时,大文件上传等待时长太久,在上传过程中想取消上传,即取消进行中的接口请求。不解释,上代码: ``` import axios from 'axios'; ``` ``` 上传文件 (注:支持pdf、png、jpg格式,大小不超过5M) ``` ``` const C ......
接口 upload antd vue3 vue

vite 项目webstorm跳转失效 VSCode、vue 无法对 @ 路径 跳转 ,几乎适用于所有webpack、vue、react项目

在根目录加一个jsconfig.json文件 { "compilerOptions": { "baseUrl": ".", "paths": { "@/*": ["src/*"] }, "target": "ES6", "allowSyntheticDefaultImports": true }, ......
项目 路径 vue webstorm webpack

react中简单使用echarts图表

1:下载echarts-for-react插件 2:组件内引入 import ReactEchatrs from 'echarts-for-react' 复制echarts官网图表的option 例如:柱形图的option react组件内 定义函数存放复制的option 并返回 import Re ......
图表 echarts react

COS SDK有Flutter和React Native版本啦

Flutter 和 React Native 是目前最流行的跨平台框架,经过了时间的考验,也有成熟的团队在SDK、文档、社区等方面进行支持。 相对于传统的原生开发,跨平台方案在开发测试成本、产品一致性等方面有一定的优势。但是有时候使用第三方库时只有原生库,没有对应的 Flutter 和 React... ......
Flutter 版本 Native React COS

4种React Native热更新方案的比较

转载自:https://www.jianshu.com/p/8f423e52b5d1 最近刚完成了一个产品的热更新功能,颇有感慨。趁着有点时间写点东西,希望能对其他开发者有点帮助吧。 为什么需要做热更新? 这个问题不是本文的重点,但既然这篇文章是关于 React Native 热更新的,就大概说一下 ......
方案 Native React

React Hooks 使用指南

React Hooks Hook 是什么 Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。 Hook 是 React 团队在 React 16.8 版本中提出的新特性,在遵循函数式组件的前提下,为已知的 Reac ......
使用指南 指南 React Hooks

[React] forwardRef typescript

import React, { forwardRef } from "react"; // Declare a type that works with generic components type FixedForwardRef = <T, P = {}>( render: (props: P, ......
forwardRef typescript React

react使用自定义animation实现水平效果的路由切换

例如:A组件跳B组件 A组件: import React from 'react'; import './A.scss' import { useNavigate } from 'react-router-dom'; export default function A() { let navigat ......
路由 animation 水平 效果 react

react图书商城前后端

下载:axios antd-mobile antd-mobile-icons sass 连接mongodb: const mongoose = require("mongoose") mongoose.connect('mongodb://127.0.0.1:27017/zg5_zk3_2204_e ......
商城 图书 react

react路由6登录拦截

自定义登录拦截组件: // 路由守卫 // 判断token是否存在,如果存在跳转页面,不存在返回登录页面 import { Navigate } from 'react-router-dom' const getToken = () => { return sessionStorage.getIte ......
路由 react

react简历案例--前后端

express:下载 mongoose 7版本 +配置cors 1:创建module文件夹(db.js、module.js) 连接mongodb数据库: const mongoose = require("mongoose") mongoose.connect("mongodb://127.0.0. ......
案例 简历 react

为什么React与Vue很难互相取代?

React和Vue很难相互取代,主要因为它们都拥有庞大的生态系统和活跃的社区支持,提供了平滑的学习曲线和良好的开发体验。它们有不同的设计理念和特性,满足不同项目需求。同时,已经拥有大量用户和粉丝基础,使得它们在市场中稳固地占据一席之地。因此,选择框架时,开发者应考虑具体项目需求、团队技能和个人偏好来 ......
React Vue

浅聊一下,React会不会被VUE取代?

开发项目只有最合适的选择,而没有绝对最好的框架。每个项目都有自己的独特需求、团队背景和时间限制,因此,在选择合适的框架时需要仔细权衡各种因素。 ......
React VUE

react18 hooks自定义移动端Popup弹窗组件RcPop

基于React18 Hooks实现手机端弹框组件RcPop react-popup 基于react18+hook自定义多功能弹框组件。整合了msg/alert/dialog/toast及android/ios弹窗效果。支持20+自定义参数、组件式+函数式调用方式,全方位满足各种弹窗场景需求。 引入组 ......
组件 react hooks Popup RcPop

React(十二):props的函数组件中使用

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>props的函数组件实现</title> <script src="https://unpkg.com/react@18/umd/react.development.js"></s ......
函数 组件 React props

React(十一):props的类型限制

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>props类型限制</title> <script src="https://unpkg.com/react@18/umd/react.development.js"></scri ......
类型 React props

React(十):props的基本使用

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>props的基本使用</title> <script src="https://unpkg.com/react@18/umd/react.development.js"></scr ......
React props

React(九):state的简写

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>state的简写形式</title> <script src="https://unpkg.com/react@18/umd/react.development.js"></scr ......
简写 React state

React(八):setState

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>setState</title> <script src="https://unpkg.com/react@18/umd/react.development.js"></scrip ......
setState React

React(七):state初始化

一、state是什么 从字面上来书state就是状态,在React中,state驱动页面的展示,它负责存放数据。 二、state的使用 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>初始化state</title> <scri ......
React state

React(五):jsx语法

1.jsx语法 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>jsx语法</title> <script src="https://unpkg.com/react@18/umd/react.development.js"></ ......
语法 React jsx

React(六):组件的两种创建方式

1.函数式组件 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>函数式组件</title> <script src="https://unpkg.com/react@18/umd/react.development.js"></ ......
组件 方式 React

React(四):虚拟DOM创建的两种方式

1.使用js创建虚拟DOM(不推荐使用) <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>js创建虚拟DOM</title> <script src="https://unpkg.com/react@18/umd/react.d ......
方式 React DOM