![](https://img-blog.csdnimg.cn/20190927151043371.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
react
文章平均质量分 51
react 相关
跳跳的小古风
热爱前端的一枚小可爱~
展开
-
react实现页面动态表单设计器(自定义推拽表单)-含完整代码讲解
左侧多个表单控件,可自由选择拖拽至中间中间对推拽后的空间进行值的输入和选择右侧。原创 2023-07-25 16:25:48 · 2252 阅读 · 7 评论 -
antd react 文件上传只允许上传一个文件且上传后隐藏上传按钮
【代码】antd react 文件上传只允许上传一个文件且上传后隐藏上传按钮。原创 2023-09-12 15:46:23 · 971 阅读 · 0 评论 -
react 踩坑记录
判断应该是form.item取值,取的下一级菜单值,由于两者平级,所以默认将P标签也作为了传值的组件,写在外层或Upload里面即可。控制台报错: “Module ‘xxx‘ does not exist in container“原因:因为项目路径移动后导致src/.umi缓存文件找不到原来的路径所导致的。Upload上传值,一直报‘请上传商家分类图片’解决:删除src/.umi然后重新运行项目。原创 2023-05-24 13:33:44 · 335 阅读 · 0 评论 -
react umi 页面缓存
【代码】react umi 页面缓存。原创 2023-06-06 10:33:07 · 1081 阅读 · 1 评论 -
react+antd实现表格封装,可动态控制列显示隐藏。
{原创 2023-06-19 09:54:49 · 1468 阅读 · 4 评论 -
react+antd 实现表单动态增加Table可编辑行,且表单可验证
【代码】react+antd 实现表单动态增加Table可编辑行,且表单可验证。原创 2023-06-07 16:27:53 · 2518 阅读 · 3 评论 -
react umi 刷新或关闭浏览器时清除localStorage
【代码】react umi 刷新或关闭浏览器时清除localStorage。原创 2023-06-06 10:33:52 · 542 阅读 · 0 评论 -
react+antd 封装图片上传组件。
问题描述:因antd本身缺陷,我们上传成功后,再次删除后,系统会默认为已经上传,导致不为空验证失效。原创 2023-06-19 10:09:29 · 567 阅读 · 0 评论 -
vue2.0与vue3.0及vue与react区别
vue2.0与3.0及vue与react区别vue2.0 与 vue3.0 区别1. 双向绑定原理2.Vue3支持碎片(Fragments)3.Composition API4.生命周期5.v-if和v-for的优先级6.typescript支持vue与 react区别共同点1.虚拟dom+diff算法2.提供了响应式和组件化的视图组件。3.注意力集中保持在核心库,而将其他功能如路由和全局状态管理交给相关的库。(vue-router、vuex、react-router、redux等等)4.数据驱动视图(无需原创 2023-02-20 17:52:22 · 740 阅读 · 0 评论 -
umi3 使用 dva 的流程及理解(model数据使用教程)
文章目录1.reducer2.effects1.call2.select3.put3.subscriptions4.connect5.parame和query传值在dva中主要分3层,models,services,components,其中models是最重要概念,这里放的是各种数据,与数据交互的应该都是在这里。services是请求后台接口的方法。components是组件了。本文主要讲model的使用.下面是model的基本结构{ namespace: String, // 命名空间名原创 2021-01-07 10:43:33 · 6082 阅读 · 4 评论 -
vue react 多级菜单动态渲染 导航菜单(一级二级三级不限层级渲染)
1.创建一个带子菜单的菜单列表MenuUtils.js,如下:var menus = [ { name:"离线", index:"offline", }, { name:"日志", index:"log", }, { nam原创 2020-12-28 17:51:17 · 3995 阅读 · 0 评论 -
react上下文context使用教程
react上下文context使用教程定义全局context对象根组件引入GlobalContext,并使用GlobalContext.Provider(生产者)改变值使用值context优缺点:优点:跨组件访问数据缺点:react组件树种某个上级组件shouldComponetUpdate 返回false,当context更新时,不会引起下级组件更新定义全局context对象globalContext.jsimport React from 'react'const GlobalCont原创 2021-06-11 14:41:27 · 639 阅读 · 1 评论 -
react动态监听state的值(React Context)
1.在utils建立一个新文件用来存储 globalContext.jsimport React from 'react';const GlobalContext = React.createContext();export default GlobalContext;2.在根组件APP.js中使用import GlobalContext from './utils/globalContext';<GlobalContext.Provider value={{ // 全局原创 2021-03-09 11:56:10 · 2856 阅读 · 0 评论 -
React.Fragment介绍与使用
React.Fragment 组件能够在不额外创建 DOM 元素的情况下,让 render() 方法中返回多个元素。一个常见模式是一个组件返回多个元素。Fragments 允许你将子列表分组,而无需向 DOM 添加额外节点。简单来说就是在我们定义组件的时候return里最外层包裹的div往往不想渲染到页面,那么就要用到我们的Fragment组件了。相当于vue的<template ></ template >.render() { return (原创 2020-12-09 11:40:08 · 850 阅读 · 0 评论 -
React => js+canvas四位数字字母混合验证码(数字+大写字母+小写字母)
下面是需要用到的方法:beginPath()新建一条路径,路径一旦创建成功,图形绘制命令被指向到路径上生成路径moveTo(x, y)把画笔移动到指定的坐标(x, y)。相当于设置路径的起始点坐标。closePath()闭合路径之后,图形绘制命令又重新指向到上下文中stroke()通过线条来绘制图形轮廓fill()通过填充路径的内容区域生成实心的图形原创 2021-01-07 14:27:40 · 783 阅读 · 5 评论 -
react基础使用
本文将对react基础进行由浅到深的讲解.html模板 每个react中需要引用的文件 <script src="../build/react.development.js"></script> <script src="../build/react-dom.development.js"></script> <script src="../build/babel.min.js"></script>原创 2020-11-27 14:35:45 · 211 阅读 · 0 评论 -
react demo小例子
需求:自定义组件,功能说明如下1.显示h2标题,初始文本为:你喜欢我2.点击标题更新为:我喜欢你class Like extends React.Component { constructor (props) { super(props) // 初始化状态 this.state = { isLikeMe: true } // 绑定this为组件对象 // this....原创 2020-11-27 14:43:02 · 2647 阅读 · 0 评论 -
React Hook 指南 useState() useEffect() useReducer() 自定义 Hook
useState()状态管理setState 和 useState 的区别setState 和 useState 同样场景的应用如何让 Function Component 也打印 3 3 3借助一个新 Hook - useRef 的能力如何不改造原始值也打印 3 3 3useState() 的无效调用useEffect()状态管理useEfffect第二个参数不能使用引用类型复杂状态用useReducer自定义 HookuseState()状态管理import React, { usestate }.原创 2021-06-11 17:24:14 · 523 阅读 · 1 评论 -
react antd 中$message的全局配置
在src的根文件 index.js中进行配置import { message } from 'antd';message.config({ duration: 2,// 持续时间 maxCount: 3 // 最大显示数, 超过限制时,最早的消息会被自动关闭 top: 70,// 到页面顶部距离});原创 2021-05-07 14:31:39 · 5475 阅读 · 0 评论 -
react中dangerouslySetInnerHTML使用(如何把带有标签的内容变成文字展示出来)
这里写目录标题通过接口返回的数据的转换自行写标签值转换通过接口返回的数据的转换<div dangerouslySetInnerHTML = {{ __html: checkMessages.details }} />自行写标签值转换<div dangerouslySetInnerHTML={{ __html: '<div>123</div>' }} />...原创 2021-02-26 16:34:01 · 628 阅读 · 0 评论