![](https://img-blog.csdnimg.cn/5e4f054f7ab74123b5e59721296eea06.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
React
文章平均质量分 60
深入浅出搞定 React
z止于至善
这个作者很懒,什么都没留下…
展开
-
Next.js 项目——从入门到入门(Eslint+Prettier)
Next.js这是一个用于生产环境的React框架。Next.js 为您提供生产环境所需的所有功能以及最佳的开发体验:包括静态及服务器端融合渲染、 支持 TypeScript、智能化打包、 路由预取等功能 无需任何配置。原创 2023-11-08 09:51:42 · 808 阅读 · 0 评论 -
React中使用antd RangePicker限制日期选择
React中使用antd RangePicker限制日期选择。选择范围为7天且不能选择今天及之后的日期。原创 2022-12-29 16:26:48 · 1912 阅读 · 3 评论 -
React中使用antd DatePicker限制日期选择
React中使用antd DatePicker限制日期选择,选择范围为7天且不能选择今天及之后的日期。原创 2022-12-28 14:28:40 · 1968 阅读 · 0 评论 -
基于React的富文本编辑器——Braft Editor使用
antd是基于 Ant Design 设计规范实现的 高质量 React 组件库,倾向于只提供符合该规范且带有视觉展现的 UI 组件,也尽量不重复造轮子。如果要在React项目中使用富文本编辑器,官方推荐使用与。这篇文章主要介绍与Antd的结合使用。原创 2022-09-26 14:33:14 · 6159 阅读 · 0 评论 -
React项目——withTranslation (HOC) 高阶组件使用ref遇到的问题
项目中,父组件想要调用子组件的方法,因此想到了使用ref,子组件是用包裹的,因为有翻译的需求。原创 2022-08-04 11:06:25 · 689 阅读 · 0 评论 -
React Native项目中《动画》实践应用——以“协议未勾选登录时文字左右抖动”为例
Animated库旨在使动画变得流畅,强大并易于构建和维护。Animated侧重于输入和输出之间的声明性关系,以及两者之间的可配置变换,此外还提供了简单的 start/stop方法来控制基于时间的动画执行。创建动画最基本的工作流程是先创建一个 Animated.Value ,将它连接到动画组件的一个或多个样式属性,然后使用Animated.timing()通过动画效果展示数据的变化.........原创 2022-08-04 10:19:05 · 564 阅读 · 0 评论 -
封装一个loading组件——基于react
最近开发需求需求自己封装一个loading组件,是在react项目中。直接上手吧!原创 2022-07-28 18:08:01 · 984 阅读 · 0 评论 -
antd Tree树形控件——不完全选中子节点后想要获取父节点的值,与后端交互
最近有一个权限树的需求,而且树的结构比较深,想要实现,在不完全选中子节点后能够获取父节点的值,一并传给后端。不完全选中子节点后想要获取父节点的值如图:选中【新增用户】和【批量导入】时,想要把【用户列表】和【用户管理】的id也传给后端。通过阅读API文档,onCheck是复选框选中时触发,其中第二个参数是一个事件对象,他的返回值打印出来如下:其中,有一个属性halfCheckedKeys就是关联父节点的值。这样,我们可以轻松的拿到值了,和选中节点拼接起来一起传给后台就好了。onCheck =原创 2021-12-26 18:57:06 · 6221 阅读 · 4 评论 -
React创建使用上下文Context,遇到Uncaught ReferenceError: Cannot access ‘UserListContext‘ before initialization
Raect开发中使用context,会遇到Uncaught ReferenceError: Cannot access 'UserListContext' before initialization这个问题。官方文档地址:添加链接描述最初的方案还原出问题的路径,首先看一下代码路径,一共两个文件UserList.js为父组件CmpUserList.js为子组件父组件提供数据给子组件。其次,看一下思路,父组件会创建一个 Context 对象,并导出这个对象,export const UserL原创 2021-12-25 10:48:42 · 2905 阅读 · 0 评论 -
React 高阶组件(HOC)
高阶组件高阶组件是一个函数具体而言,高阶组件是参数为组件,返回值为新组件的函数。const EnhancedComponent = higherOrderComponent(WrappedComponent);既然是函数,那就可以有参数,有返回值。从上面可以看出,这个函数接收一个组件 WrappedComponent 作为参数 ,返回加工过的新组件 EnhancedComponent。组件是将 props 转换为 UI,而高阶组件是将组件转换为另一个组件。HOC 在 React 的第三方库中很原创 2021-06-22 11:18:24 · 234 阅读 · 0 评论 -
解决复制图文到富文本编辑器Braft Editor,图片不显示问题
问题描述React项目中,使用富文本编辑器Braft Editor创建内容,图片单独复制粘贴,是可以正常显示的; 和文章一起复制粘贴过来,图片就会有问题解决在入口文件index.html中加入<meta name="referrer" content="never">...原创 2021-05-17 15:37:37 · 2495 阅读 · 2 评论 -
React项目中用到的dangerouslySetInnerHTML
dangerouslySetInnerHTML 是 React 为浏览器 DOM 提供 innerHTML的替换方案。如果后台返回的是带有HTML标签的字符串(使用富文本编辑器创建的资讯之类的),可以使用 dangerouslySetInnerHTML直接在 React 中设置 HTML,需要向其传递包含 key 为 __html 的对象。例如:<div className="detail-content" dangerouslySetInnerHTML={{ __html: l原创 2021-05-15 15:12:54 · 2131 阅读 · 0 评论 -
React 生命周期详解(新)
React 16之后有三个生命周期被废弃:componentWillMountcomponentWillReceivePropscomponentWillUpdate因为这些生命周期方法容易被误解和滥用。React 16.8+的生命周期分为三个阶段,分别是挂载阶段、更新阶段、卸载阶段。挂载阶段constructor: 构造函数,最先被执行,我们通常在构造函数里初始化state对象或者给自定义方法绑定thisgetDerivedStateFromProps: static getDeri转载 2021-05-15 11:38:40 · 34021 阅读 · 1 评论 -
antd 3.26.x 表单验证的时候提示 ‘‘ is not a string
尝试将必填校验写法getFieldDecorator(qn.questionId, { rules: [ qn.required && { required: true, message: t('此项必填') } ]}由上面这种修改为下面的写法:getFieldDecorator(qn.questionId, { rules: qn.required ? [原创 2021-05-13 15:27:57 · 1914 阅读 · 0 评论 -
Redux 数据流
严格的单向数据流是 Redux 架构的设计核心Redux 应用中数据的生命周期遵循下面 4 个步骤:1. 调用 [store.dispatch(action)](http://cn.redux.js.org/docs/api/Store.html#dispatch)Action 就是一个描述“发生了什么”的普通对象。比如:{ type: 'LIKE_ARTICLE', articleId: 42 }{ type: 'FETCH_USER_SUCCESS', response: { id: 3, n原创 2021-02-20 11:51:15 · 557 阅读 · 0 评论 -
React State & 生命周期
向 class 组件中添加局部的 state添加一个 class 构造函数,然后在该函数中为 this.state 赋初值,也可以不写构造函数,给state赋初值:import React, { Component } from 'react'export default class Clock extends Component { // 构造函数,给this.state赋初值 // constructor(props) { // super(props) // this.原创 2021-02-17 11:54:57 · 154 阅读 · 0 评论 -
React 组件 & Props
组件,从概念上类似于 JavaScript 函数。它接受任意的入参(即 “props”),并返回用于描述页面展示内容的 React 元素。函数组件与 class 组件定义组件最简单的方式就是编写 JavaScript 函数:function Welcome(props) { return <h1>Hello, {props.name}</h1>;}该函数是一个有效的 React 组件,因为它接收唯一带有数据的 “props”(代表属性)对象与并返回一个 React 元原创 2021-02-16 10:22:39 · 203 阅读 · 0 评论 -
React 事件处理
React 元素的事件处理和 DOM 元素的很相似,但是有一点语法上的不同:React 事件的命名采用小驼峰式(camelCase),而不是纯小写。使用 JSX语法时你需要传入一个函数作为事件处理函数,而不是一个字符串。例如,传统的 HTML:<button onclick="activateLasers()"> Activate Lasers</button>在 React 中略微不同:<button onClick={activateLasers}&原创 2021-02-15 18:48:00 · 288 阅读 · 0 评论