面包屑 面包react antd

react中常见hook的使用方式与区别

react中常见hook的使用方式与区别 1、什么是hook?react hook是react 16.8推出的方法,能够让函数式组件像类式组件一样拥有state、ref、生命周期等属性。 2、为什么要出现hook?函数式组件是全局当中一个普通函数,在非严格模式下this指向window,但是reac ......
常见 方式 react hook

为react项目添加开发/提交规范(前端工程化、eslint、prettier、husky、commitlint、stylelint)

为react项目添加开发/提交规范(前端工程化、eslint、prettier、husky、commitlint、stylelint) 因历史遗留原因,接手的项目没有代码提醒/格式化,包括 eslint、pretttier,也没有 commit 提交校验,如 husky、commitlint、sty ......
前端 commitlint stylelint prettier 项目

react18-webchat网页聊天实例|React Hooks+Arco Design仿微信桌面端

React18 Hooks+Arco-Design+Zustand仿微信客户端聊天ReactWebchat。 react18-webchat基于react18+vite4.x+arco-design+zustand等技术开发的一款仿制微信网页版聊天实战项目。实现发送带有emoj消息文本、图片/视频预 ......
实例 桌面 webchat 网页 Design

超全面详细一条龙教程!从零搭建React项目全家桶(上篇)

超全面详细一条龙教程!从零搭建React项目全家桶(上篇) 兔子先生 ​关注他 101 人赞同了该文章 React是近几年来前端项目开发非常火的一个框架,其背景是Facebook团队的技术支持,市场占有率也很高。很多初学者纠结一开始是学react还是vue。个人觉得,有时间的话,最好两个都掌握一下。 ......
上篇 一条龙 全家 项目 教程

从0到1搭建一个react项目

从0到1搭建一个react项目 react分享 高级前端工程师 ​关注他 首先新建一个文件夹, 然后用编辑器vscode打开这个文件夹 打开文件夹后执行npm init命令, 会提示你生成package.json文件 然后下载npm包, 下面贴下package.json { "name": "dem ......
项目 react

Vue vs React:你需要知道的一切

Vue 和 React 是创建 JavaScript 网络应用程序最常用的两种工具。但我们该如何在两者之间做出选择呢?在本篇 Vue 与 React 的对比中,我们将尝试找出答案。我们将回顾每种工具的优缺点,提供选择使用哪种工具的技巧,并帮助你开始使用。 总览 什么是Vue? Vue趣事 什么是Re ......
React Vue vs

React项目笔记

环境准备 node v16.15.0 npm 8.5.5 Ant Design of React:https://ant.design/docs/react/introduce-cn 一,创建项目 npm init vite √ Project name: ... vite-project-reac ......
笔记 项目 React

react-parallax-tilt

### react-parallax-tilt ## api eact-parallax-tilt ## 描述 这个组件可以实现内容根据鼠标的移动而移动,可以进行旋转、倾斜、放大、缩小等效果。 ## 使用方式 ```bash # 安装依赖 npm i react-parallax-tilt -s ` ......
react-parallax-tilt parallax react tilt

推荐一个react上拉加载更多插件:react-infinite-scroller

推荐一个react上拉加载更多插件:react-infinite-scroller 在开发网页和移动应用时,经常需要处理大量数据的展示和加载。如果数据量非常大,一次性全部加载可能会导致页面卡顿或崩溃。为了解决这个问题,我们可以使用无限滚动(Infinite Scroll)的技术。React 提供了一 ......

react 添加 setupProxy.js 后打不开网页

加入setupProxy.js文件后,原本访问正常的页面,显示拒绝访问 源js代码 const proxy = require('http-proxy-middleware') module.exports = function(app) { app.use( proxy('/api1', { // ......
setupProxy 网页 react js

React使用useRef调用子组件方法

### **前情** 公司前端主技术栈是react系,最近在提取组件的时候想到vue可以通过ref获取子组件,再调用子组件的方法,于是想在react中实现同样效果。 ### 实现原理 父组件调用useRef获取ref对象,再通过属性把ref对象传入子组件,子组件通过useImperativeHand ......
组件 方法 useRef React

推荐一个react上拉加载更多插件:react-infinite-scroller

在开发网页和移动应用时,经常需要处理大量数据的展示和加载。如果数据量非常大,一次性全部加载可能会导致页面卡顿或崩溃。为了解决这个问题,我们可以使用无限滚动(Infinite Scroll)的技术。React 提供了一个方便的组件库,即 react-infinite-scroller,它可以帮助我们实 ......

react hooks 防止重复点击事件

一、使用useRef控制 import React ,{useState, useRef} from 'react' import './App.css'; function App() { const [count ,setCount] = useState(0) const flag = use ......
事件 react hooks

react hooks 中useContext的使用

父组件中: import React ,{useState, createContext} from 'react' import './App.css'; import ChildOne from './components/ChildOne'; import ChildTwo from './c ......
useContext react hooks

react native firebase mobile推送通知

一、使用postman推送mobile通知 构建推送请求,参考firebase官网:https://firebase.google.com/docs/cloud-messaging/migrate-v1?hl=zh-cn token:即接收通知设备token, OAuth toekn获取: 1、Go ......
firebase native mobile react

关于antd Input 的defaultValue无法重新渲染的问题

最近在开发一个功能,table里面的Input组件。需要单行能够编辑,又要多行一起编辑,如下。 在这种情况下,就只能对Input组件使用value受控,而不能使用defaultValue受控。因为defaultValue受控在批量编辑的时候无效。 现在遇到的问题是,使用value受控,在onChan ......
defaultValue 问题 Input antd

Vue/React对比学习

### 组件传值 ``` // 父组件 export default function Tab(props: any) { const [serverUrl, setServerUrl] = useState('https://'); console.log(props); // 父组件接受子组件的 ......
React Vue

如何使用Java + React计算个人所得税?

**前言** 在报表数据处理中,Excel公式拥有强大而多样的功能,广泛应用于各个业务领域。无论是投资收益计算、财务报表编制还是保险收益估算,Excel公式都扮演着不可或缺的角色。传统的做法是直接依赖Excel来实现复杂的业务逻辑,并生成相应的Excel文件。因此只需在预设位置输入相应参数,Exce ......
个人所得税 所得税 React 个人 Java

android短视频开发,React设置自定义滚动条样式

android短视频开发,React设置自定义滚动条样式 1、全局配置 在global.less文件添加如下配置 /*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/::-webkit-scrollbar { width: 5px; height: 10px;}/*定义滑块 内阴影+圆角*/: ......
样式 android React 视频

antd限制开始时间与结束时间范围是30天,并不能选择当前日期之后的日期 vue3(默认展示近7天)

<a-range-picker :value="hackValue || dateArr" :disabled-date="disabledDate" style="width: 240px" separator="~" :allow-clear="false" @change="onChange" ......
日期 时间 范围 antd vue3

react 创建项目失败

创建react工程报错:npm WARN deprecated tar@2.2.2: This version of tar is no longer supported, and will not_mask哥的博客-CSDN博客 首先确认Node >= 14.0.0 and npm >= 5.6 ......
项目 react

antd的一个bug

1、 菜单长成这样 事实上我们要菜单这样 目前antd 实现不了,很不友好的东西 ......
antd bug

【antd】动态增加表单项

import React, { useState } from 'react'; import 'antd/dist/antd.css'; import './index.css'; import { MinusCircleOutlined, PlusOutlined } from '@ant-de ......
单项 动态 antd

想让你的工作轻松高效吗?揭秘Java + React导出Excel/PDF的绝妙技巧!

**前言** 在B/S架构中,服务端导出是一种高效的方式。它将导出的逻辑放在服务端,前端仅需发起请求即可。通过在服务端完成导出后,前端再下载文件完成整个导出过程。服务端导出具有许多优点,如数据安全、适用于大规模数据场景以及不受前端性能影响等。 本文将使用前端框架React和服务端框架Spring B ......
技巧 Excel React Java PDF

Ant Design 5.8.6 发布,企业级 UI 设计语言和 React 实现

Ant Design 5.8.6 发布,企业级 UI 设计语言和 React 实现 来源: OSCHINA 编辑: 白开水不加糖 2023-09-03 10:31:02 0 Ant Design 5.8.6 现已发布,主要变化如下: 针对 CSSInJS 加载 styles 大小进行了优化。 Not ......
语言 Design React 企业 Ant

一个.NET 7 + DDD + CQRS +React+Vite的实战项目

## 项目简介 基于SignalR实现聊天通信,支持横向扩展,可支撑上万用户同时在线聊天 ## 快速体验 http://server.tokengo.top:8888/ 可在这里快速体验使用,请注意目前只适配了PC端,请勿使用手机访问,可能出现样式不适应的情况, 当然如果你想要自己部署也可以,目前提 ......
实战 项目 React CQRS Vite

解决antd Form的onChange方法改变的值与getFieldsValue获取的值不同步的问题

项目场景: 我想用antd写一个动态添加表单的Input框的功能,并且自动计算Input中的值,所以需要实时获取表单的数据。 问题描述在onChange时使用form.getFieldsValue()方法获取的表单值是上次改变的值,与当前onChange改变的值不一致。这个时候我就在网上找解决方法。 ......
getFieldsValue onChange 方法 问题 antd

轻松理解Vue和React的异同

在前端界,Vue和React最近几年一直是我们开发前端项目的两个主流选项。但作为一个想要学习使用框架最快速开发应用的新人我应该先学习哪个?或者说当我们在开发一个新项目时,到底具体是应该选择用Vue呢?还是应该选择用React?这两个的区别是什么?联系是什么?这篇文章,我尽量用最简单的语言来试图阐述我 ......
异同 React Vue

[React Typescript] Strongly typed React component `as`

The `as` Prop in React Option 1: import { Equal, Expect } from '../helpers/type-utils'; export const Wrapper = <TProps extends keyof JSX.IntrinsicElem ......
React Typescript component Strongly typed

React中使用PDF文件预览插件react-pdf

## 为什么要用react-pdf 先不说其他场景,就说你在安卓浏览器预览PDF文件的时候,可能遇到过一个问题:`需要下载后预览`。这个问题在苹果浏览器上倒是没有。 那么,react-pdf可以解决这个问题。 ## 注意事项 首先说个重要的事情:你在搜索react-pdf官网的时候,大概率是会搜索到 ......
react-pdf 插件 文件 React react