
React
那就可爱多一点点
程序员,喜欢和挑战的前端童鞋,希望可以一起沟通学习
展开
-
React的基础API介绍(二)
useState 是 React Hooks 中最基本也是最常用的一个 Hook,用于在函数组件中添加状态管理功能。它使得函数组件能够像类组件一样拥有内部状态,而无需编写类组件的样板代码。useState 的引入改变了这一点,它允许在函数组件中引入状态。每次调用useState,都创建了一个状态变量和更新该状态的函数。原创 2024-11-11 18:01:50 · 589 阅读 · 0 评论 -
React的基础API介绍(一)
在重新执行 effect 之前:如果 useEffect 的依赖项数组中的某个值发生了变化,React 会在重新执行 effect 之前调用上一次 effect 的清除函数。这避免了副作用的累积,并确保每次 effect 执行前的环境是干净的。useEffect 中的函数能够读取到最新的 count 状态值,主要是由于 JavaScript 中的闭包机制和 React 函数组件的渲染逻辑。避免不必要的更新:通过正确设置依赖项数组,可以避免不必要的 effect 执行,提高组件性能。不会阻塞渲染,更常用。原创 2024-11-11 17:11:39 · 1228 阅读 · 0 评论 -
从零开始到完整的React后台管理项目开发路程(第四节)
原生的localStroge兼容性不够,所以引入store库来存。这里有个关于路由导航的渲染方法,我一共尝试了两种方法写,其中有个天气模块,需要先去申请。如何维持登陆、免登陆。原创 2022-08-15 17:25:14 · 431 阅读 · 0 评论 -
从零开始到完整的React后台管理项目开发路程(关于路由导航栏的渲染方式)
React用的是jsx风格的代码语言,所以写的的时候可以直接生成带html标签的数组因为侧边路由配置不止一个,所以最好的方法是配置路由地址文件,然后去遍历渲染其实就是递归的思路去生成数组。......原创 2022-08-15 15:52:33 · 851 阅读 · 0 评论 -
Ant design React 修改表格的表头标题样式!!
亲测有效,就算有自定义主题色也可以生效,不会被覆盖自定义title :import ColumnShow from './component/columnShow' // 引入组件------------------------------------ this.columns = [{ title: <ColumnShow content={item} color={colors} />, dataIndex: item, key: item, width: 150}]原创 2021-01-26 17:31:28 · 3969 阅读 · 0 评论 -
使用ant design 的tree控件时给checkedKeys赋值导致树结点点击无效
这是在组件首次加载时初始化选中的节点,只会生效一次,之后不会再更新。: 这个属性用于控制受控状态下的节点选中,允许动态改变节点的选中状态,可以实时更新回显值。使用 defaultCheckedKeys 很容易导致的问题是,节点选中状态只会在组件初次渲染时生效,一旦外部的选中状态发生变化,它就无法反映更新。因此,当你需要在父组件中动态更新 Tree 的选中状态时,defaultCheckedKeys 显得有些不够灵活。原创 2020-12-30 16:20:24 · 7071 阅读 · 1 评论 -
React再ant design 中弹窗把子组件表单的数据传递给父组件
#### 父组件handleOk = () => { const changeValue = this.formRef.current.getFieldValue('categoryName')// 取到子组件的输入框的值} render() { return ( <Modal title={this.state.modalName} visible={this.state.visible} onOk={this.han原创 2020-12-15 15:30:59 · 2710 阅读 · 2 评论 -
Ant表单出现“You cannot set a form field before rendering a field associated with the value”
今天在做ant表单回显的时候出现You cannot set a form field before rendering a field associated with the value是因为先赋值了,但是表单还没有渲染,所有延迟就好了 setTimeout(()=>{ this.props.form.setFieldsValue({ 'userName':name }) },0)......原创 2020-08-05 17:35:58 · 1149 阅读 · 0 评论 -
React 使用 Video.js 加载 HLS视频流
加载依赖npm install --save video.js封装组件说明: 这里sources可以传入多个视频源,type可以自己指定根据播放流来进行选择。因为需求我是一个一个视频单独加载出来的。VideoPlayer.jsimport React from 'react';import videojs from 'video.js';import './myVideo.css';export default class VideoPlayer extends React.Compone原创 2020-08-04 14:48:21 · 2515 阅读 · 0 评论 -
从零开始到完整的React后台管理项目开发路程(第三节)
搭建ajax请求如何启动mongdb server进行接口测试请看上一篇专门介绍1、下载ajax依赖包yarn add axios原创 2020-08-03 15:13:33 · 258 阅读 · 0 评论 -
从零开始到完整的React后台管理项目开发路程(第二节)
今天我们做登录页面开始之前先引入一个全局初始化CSS文件,引入到html.js中原创 2020-07-31 12:14:19 · 311 阅读 · 0 评论 -
从零开始到完整的React后台管理项目开发路程(第一节)
1、使用creat-react-app搭建脚手架我使用的是 VSCode,看个人喜好在控制台输入以下命令,或者在项目的文件夹中打开GitBash:npm install -g creat-react-app 全局下载工具create-react-app your_projectname 初始化一个项目模板npm start2、搭建项目的开发目录.........原创 2020-07-28 09:45:37 · 670 阅读 · 0 评论 -
must set key for <rc-animate> children问题
在使用React开发的时候,其中数据回显的时候用到了upload组件回显图片,遇到这个问题发现是图片数组长度虽然不为0,但是里面的参数没有值,所以组件回显遍历的时候不成功!提示这种错误修改方法判断没有传图片的时候我觉得出现这种情况的原因是新增的时候没有判断图片数组为空的时候不传给后端,所以有个默认为空的时候...原创 2020-07-24 18:28:06 · 4244 阅读 · 0 评论 -
Ant UI 的表单校验
```Reactimport React from "react";import { Card, Form, Input, Button, message, Icon, Checkbox } from "antd";const FormItem = Form.Item; // 表单的单行class FormLogin extends React.Component{ handleSubmit = ()=>{ let userInfo = this.props.for.原创 2020-07-03 15:25:14 · 609 阅读 · 0 评论