REACT

【React+Antd】 多选下拉框禁止输入

<Select options={} onChange={provinceChange} allowClear mode="multiple"// showSearch={false} maxTagTextLength={4} /> mode设置为多选,multiple配合showSearch可以实 ......
React Antd

【React】格式化中国标准时间

//定义格式化函数: handleTime(time, format) { if (time == null || time == undefined || time == "") { return ""; } var t = new Date(time); var tf = function (i ......
标准时 格式 标准 React

【React】自定义水印方法

创建水印方法: const setWaterwark = ({ // 使用 ES6 的函数默认值方式设置参数的默认取值 container = document.body, width = '250px', height = '160px', textAlign = 'left', textBase ......
水印 方法 React

【React】视频播放器,ReactPlayer的使用

import React from 'react'; import ReactPlayer from 'react-player'//引入 const LiveBroadcast=()=>{ return<ReactPlayer className='react-player' url='....f ......
ReactPlayer 播放器 React 视频

【React+Antd】 可展开Table

在antd基础上进行改造,抛弃之前的靠前面+进行展开的方式,在操作列进行点击展开 import { Table } from 'antd'; import React,{useState} from 'react'; import 'antd/dist/antd.css'; import './in ......
React Table Antd

【React+Antd】可编辑表格

import React, { useContext, useState, useEffect, useRef } from "react"; import { Table, Input, Button, Popconfirm, Form } from "antd"; const EditableC ......
表格 React Antd

【React】定时器组件

鼠标移入关闭定时器并清除,鼠标移出组件的时候打开定时器进行循环 const timer = useRef(null); useEffect(() => { startLoop(); }, []); const startLoop = () => { stopLoop(); timer.current ......
定时器 组件 React

【React+Antd】表格增删改

Modal弹框进行增改,删除直接用filter进行删除 添加: 1 setTabledate([...tabledate, newD]); 删除: setTabledate(tabledate.filter((item) => item.key !== record.key)); 修改: const ......
表格 React Antd

从0到1无比流畅的React入门教程

无比流畅的React入门教程(无比流畅的React入门教程) React 是什么 简介 用于构建 Web 和原生交互界面的库 React 用组件创建用户界面 通俗来讲:==是一个将数据渲染为HTML视图的开源JS库== 其他信息 Facebook 开发,并且开源 为什么使用React? 原生JS使用 ......
入门教程 教程 React

React笔记-生命周期(七)

React笔记-生命周期(七) 生命周期值React组件从装载到卸载的全过程 在这个过程中React提供了多个内置函数供开发者在不同阶段执行需要的逻辑 状态组件由3个阶段组成 挂载阶段(MOUNTING) 更新阶段(UPDATING) 卸载阶段(UNMOUNT) 从纵向划分为2个阶段 Render阶 ......
周期 生命 笔记 React

React

React React setState 异步同步 在 setTimeout、Promise 等原生事件 API 调用中 setState 和 useState 是同步执行的,立即执行 render Class Component 能获取到最新值 => this.state => 引用类型 Func ......
React

React笔记-组件(一)

React学习笔记-组件(一未完成) 特点 声明式 组件化 跨平台 React脚手架 a. 全局安装react脚手架 create-react-app npm install create-react-app -g & npx create-react-app my-app b. 使用create- ......
组件 笔记 React

React笔记-样式(二)

React学习笔记-样式(二) 内联样式 import React from "react"; export default class LearnStyle extends React.Component { render () { return ( <div> {/* 以下两种方法都可以 一种不 ......
样式 笔记 React

React笔记-事件(三)

React学习笔记-事件(三) 定义事件 React 元素的事件处理和 DOM 元素的很相似 但是有一点语法上的不同 React 事件的命名采用小驼峰式(camelCase)而不是纯小写 如点击事件onClick import React from 'react' export default cl ......
事件 笔记 React

React笔记-state(四)

React学习笔记-state(四) 概念 state的主要作用是用于组件保存 控制以及修改自己的状态 它算是组件的私有属性 不可通过外部访问和修改 只能通过组件内部的this.setState来修改 修改state属性会导致组件的重新渲染 注意: 如果直接通过this.state.xxx的方式修改 ......
笔记 React state

React笔记-渲染列表Key(五)

React学习笔记-渲染列表Key(五) 渲染列表需要添加key属性 import React from "react" export default class LearnKey extends React.Component { state = { infos : [ {name : 'Bob' ......
笔记 React Key

ReactHub:我用 ChatGPT 搞了一个 React 的资源导航网站,谁有我用心啊!

大家好,我是DOM哥。 图谱年年有,今年我来盘! 之前已经盘完了 Vue 的技术图谱,今天来盘 React 的。不管你是资深 React 用户,还是刚入门想学习 React 的小白,相信都能帮助到你 ......
资源导航 ReactHub ChatGPT 资源 React

React Native之React基础

React Native 的基础是React, 是在 web 端非常流行的开源 UI 框架。要想掌握 React Native,先了解 React 框架还是很有帮助的。主要理解三个概念:组件、状态和 JSX。 使用组件的方式描述 UI 使用组件的方式描述 UI在 React 中,所有的 UI 都是通 ......
React 基础 Native

react 杂记2

大括号 - JavaScript 的“新世界”{变量} {方法(param)} {逻辑} {逻辑+html} {}里面还是可以应用变量 再用{}获取即可 函数 (onClick),变量 (movieName) ,插槽(children),都是作为props传递给子组件的 添加事件 注意:传递的是一个 ......
杂记 react

react + antd table列表自动滚动

/** * @file: table列表自动滚动,鼠标划入滚动暂停,鼠标划出滚动继续 */ const [dataSource, setDataSource] = useState([]) const [timer, setTimer] = useState() useEffect(() => { ......
react table antd

理解 React 中的 useEffect、useMemo 与 useCallback

useEffect 先理解 useEffect 有助于学习 useMemo 和 useCallback。因为 useMemo 和 useCallback 的实现实际上都是基于 useEffect 的。 useEffect 是 React 中的一个很重要的 Hook,用于执行副作用操作。什么是副作用? ......
useCallback useEffect useMemo React

[React Typescript] ComponentProps

Blog: https://www.totaltypescript.com/react-component-props-type-helper Get any Prop type from html element: import { ComponentProps } from "react"; t ......
ComponentProps Typescript React

react-navigation 页面跳转

使用react-navigation 在进行页面跳转的时候,遇到些问题,现在来总结下,主要是web和android 的差异 react-navigation 页面跳转方法 navigation navigate - 转到另一个屏幕,找出需要采取的操作 replace - 用新屏幕替换当前屏幕 pus ......
react-navigation navigation 页面 react

react native UIManager.measure 方法废弃 替代

从 React Native 0.63 开始,UIManager.measure 方法已被废弃并计划在未来的版本中移除。 取而代之的是使用 useRef 和 useLayoutEffect 钩子函数, 结合 measure 方法的异步调用实现对组件的测量。 具体实现方法如下: 首先通过 useRef ......
UIManager measure 方法 native react

react useCallback获取元素实时高度

import React, { useCallback, useState } from 'react'; import { Button } from 'antd'; const maxHeight = 540; const Component = () => { const [textHeigh ......
useCallback 实时 元素 高度 react

React Native之JSX语法

一、什么是 JSX JSX即JavaScript XML。一种在React组件内部构建标签的类XML语法。JSX为react.js开发的一套语法糖,也是react.js的使用基础。React在不使用JSX的情况下一样可以工作,然而使用JSX可以提高组件的可读性,因此推荐使用JSX。 二、JSX 的基 ......
语法 Native React JSX

umi +react 搭建项目细节记录

配置请求域名,有umirc.ts文件可以直接在该文件加 proxy: { '/api': { // 检测域名后面带 /api/ 的路径 target: 'http://192.168.0.90', // 要请求的域名或IP地址 'changeOrigin': true, // 'pathRewrit ......
细节 项目 react umi

第二节:react-redux详解、分模块、调式工具等

一. 二. 三. ! 作 者 : Yaopengfei(姚鹏飞) 博客地址 : http://www.cnblogs.com/yaopengfei/ 声 明1 : 如有错误,欢迎讨论,请勿谩骂^_^。 声 明2 : 原创博客请在转载时保留原文链接或在文章开头加上本人博客地址,否则保留追究法律责任的权 ......
调式 react-redux 模块 工具 react

react 用父组件状态控制子组件状态方案

react 想用父组件的状态来控制子组件的状态。有时我们可能想在父组件里设置子组件某个状态的值,这时我们应该怎么实现代码呢? 法一:把需要共享的状态放在子组件的参数里 比如下面这个 MyTestSubModal 子组件,有 2 个状态:visible 和 loading,分别使用 setVisibl ......
组件 状态 方案 react

Uncaught Error: Objects are not valid as a React child (found: object with keys {content, key, duration}). If you meant to render a collection of children, use an array instead(转)

转自:react报错 Uncaught Error: Objects are not valid as a React child (found: object with keys {a} ... 报错信息分析 Uncaught Error: Objects are not valid as a R ......