48浏览

0评论

react+antd 递归实现树状目录操作

1.写在前面作为前端小白的我一直对算法和数据结构浅尝辄止，哝，吃亏了。使用多次递归实现数据格式化后将数据进行树状展示的目的，分享一下我这次挠头的经历~2.数据后台传过来的...

• 2021-05-30

89浏览

0评论

react中hook介绍以及使用教程

前言
最近由于公司的项目开发，就学习了在react关于hook的使用，对其有个基本的认识以及如何在项目中去应用hook。在这篇博客中主要从以下的几个点进行介绍： hook简介 hook中常...

• 2021-05-30

60浏览

0评论

react antd表格中渲染一张或多张图片的实例

使用antd table中显示一张图片，代码如下：const columns = [ { title: "姓名", dataIndex: "name", width: 100 , // table列定宽 可不设 fixed: "left" // 固定列的位置 }, {...

• 2021-05-30

57浏览

0评论

Electron整合React使用搭建开发环境的步骤详解

简介用于构建用户界面的 JavaScript 库步骤首先创建Reactnpx create-react-app doc进入到doc项目cd doc安装electronnpm install electron --save-dev安装依赖判断是否为生...

• 2021-05-30

63浏览

0评论

详细分析React 表单与事件

本章节我们将讨论如何在 React 中使用表单。HTML 表单元素与 React 中的其他 DOM 元素有所不同,因为表单元素生来就保留一些内部状态。在 HTML 当中，像 <input>, <textarea>,...

• 2021-05-30

82浏览

0评论

详解三种方式在React中解决绑定this的作用域问题并传参

在React中时常会遇到this指向的作用域问题 从而导致undefined报错先来个Demo：
功能很简单 点击按钮改变文字import React from 'react';export default class BindWithThis e...

• 2021-05-30

73浏览

0评论

react实现复选框全选和反选组件效果

本文实例为大家分享了react实现复选框全选和反选组件的具体代码，供大家参考，具体内容如下运行效果图如下：代码：import React, { Component } from 'react';import { withRouter...

• 2021-05-30

61浏览

0评论

react ant Design手动设置表单的值操作

1.设置表单的值this.props.form.setFieldsValue({ name:"张三", });2.清空表单的值this.props.form.resetFields();3.获取某一输入框的值this.props.form.getFieldValue('ne...

• 2021-05-30

43浏览

0评论

React中使用Vditor自定义图片详解

安装npm install vditor -s引用导入依赖包import Vditor from "vditor";导入样式import "vditor/src/assets/scss/index.scss";使用示例export default class Vditor extend...

• 2021-05-30

78浏览

0评论

为react组件库添加typescript类型提示的方法

以我自己的组件react-better-countdown为例，
首先在package.json里面添加types: types/index.d.ts，，
然后文件目录上添加对应文件夹和文件，

最后是index.d.ts文件的编写，具体看...

• 2021-05-30

47浏览

0评论

详解React 元素渲染

元素是构成 React 应用的最小单位，它用于描述屏幕上输出的内容。const element = <h1>Hello, world!</h1>;与浏览器的 DOM 元素不同，React 当中的元素事实上是普通的对象，React...

• 2021-05-30

94浏览

0评论

使用React-Router实现前端路由鉴权的示例代码

React-Router 是React生态里面很重要的一环，现在React的单页应用的路由基本都是前端自己管理的，而不像以前是后端路由，React管理路由的库常用的就是就是 React-Router 。本文想...

• 2021-05-30

66浏览

0评论

JavaScript React如何修改默认端口号方法详解

问题我们在使用React的时候经常会遇到这种情况，3000端口号被占用。有时候可以关掉3000端口，但更多时候，我们需要打开多个项目的时候，就必须要开启多个端口了。这时候就需要修改...

• 2021-05-30

77浏览

0评论

利用React高阶组件实现一个面包屑导航的示例

什么是 React 高阶组件
React 高阶组件就是以高阶函数的方式包裹需要修饰的 React 组件，并返回处理完成后的 React 组件。React 高阶组件在 React 生态中使用的非常频繁，比如r...

• 2021-05-30

58浏览

0评论

React实现轮播效果

本文实例为大家分享了React实现轮播，供大家参考，具体内容如下思路1、使用全局的state进行状态管理
2、设置全局下标，对当前的图片下表进行样式划分
3、定时循环人物便利改变全...

• 2021-05-30

67浏览

0评论

在react-antd中弹出层form内容传递给父组件的操作

我就废话不多说了，大家还是直接看代码吧~子组件：// jshint esversion:6import React, { Component } from 'react';import { Form, Input} from 'antd';const FormItem = Form...

• 2021-05-30

58浏览

0评论

react使用antd表单赋值,用于修改弹框的操作

1、使用getFieldDecorator的initialValue2、在state里定义一个变量存表格的数据3、给打开弹框的方法传个record4、把表格里的值存到state5、把在state里存的值传给弹框6、获...

• 2021-05-30

66浏览

0评论

详解React路由传参方法汇总记录

React中传参方式有很多，通过路由传参的方式也是必不可少的一种。本文记录项目中会用到的路由传参方式： 路由跳转传参API + 目标路由获取参数的方式。一、动态路由跳转方法Link...

• 2021-05-30

77浏览

0评论

react-native 实现购物车滑动删除效果的示例代码

购物车的功能基本上电商项目都会有的，这是一篇关于react-native的，原生android的已经好久没写了。记得以前写原生购物车的时候，遇到过产品的灵魂质问，为啥iOS的滑动删除可以，andr...

• 2021-05-30

51浏览

0评论

React获取Java后台文件流并下载Excel文件流程解析

记录使用blob对象接收java后台文件流并下载为xlsx格式的详细过程，关键部分代码如下。首先在java后台中设置response中的参数：public void exportExcel(HttpServletResponse re...

• 2021-05-30

61浏览

0评论

详解React 条件渲染

在 React 中，你可以创建不同的组件来封装各种你需要的行为。然后还可以根据应用的状态变化只渲染其中的一部分。React 中的条件渲染和 JavaScript 中的一致，使用 JavaScript...

• 2021-05-30

78浏览

0评论

实例讲解React 组件生命周期

在本章节中我们将讨论 React 组件的生命周期。组件的生命周期可分成三个状态： Mounting：已插入真实 DOM Updating：正在被重新渲染 Unmounting：已移出真实 DOM
生命周期的方...

• 2021-05-30

60浏览

0评论

React实现阿里云OSS上传文件的示例

简介阿里云 OSS 是 阿里云提供的海量、安全、低成本、高可靠的云存储服务，提供 99.9999999999%的数据可靠性（号称）。能够使用 RESTful API 可以在互联网任何位置存储和访问，支持...

• 2021-05-30

215浏览

0评论

React Ant Design树形表格的复杂增删改操作

最近因为业务接触了antd，使用antd完成一个复杂的树形表格的显示以及修改。在这其中遇见了不少坑，很多功能antd只写了初步的功能，更为细化的功能只能自己完善。踩过的坑都写在了...

• 2021-05-30

117浏览

0评论

使用webpack5从0到1搭建一个react项目的实现步骤

前言
在这之前，每开始一个新项目我都是使用现有的脚手架，这非常便于快速地启动一个新项目，而且通用的脚手架通常考虑地更加全面，也有利于项目的稳定开发；不过对于一个小项目，根据...

• 2021-05-30

47浏览

0评论

React实现类似淘宝tab居中切换效果的示例代码

效果 DOM布局const label = { lettersort: false, paramname: "label", paramid: 0, title: "车源列表筛选项", option: [{ value: 1, text: "全部" }, { value: 2,...

• 2021-05-30

65浏览

0评论

React+EggJs实现断点续传的示例代码

技术栈
前端用了React，后端则是EggJs，都用了TypeScript编写。断点续传实现原理
断点续传就是在上传一个文件的时候可以暂停掉上传中的文件，然后恢复上传时不需要重新上传整个文...

• 2021-05-30

54浏览

0评论

实例讲解React 组件

本章节我们将讨论如何使用组件使得我们的应用更容易来管理。接下来我们封装一个输出 "Hello World！" 的组件，组件名为 HelloMessage：function HelloMessage(props) { return <h...

• 2021-05-30

72浏览

0评论

React冒泡和阻止冒泡的应用详解

阻止事件冒泡分三种：1：阻止合成事件往最外层document上的事件冒泡，用e.nativeEvent.stopImmediatePropagation();2: 合成事件间的冒泡，使用 e.stopPropagation()；3：阻止合成事件，往...

• 2021-05-30

47浏览

0评论

React实现全选功能

本文实例为大家分享了React实现全选功能的具体代码，供大家参考，具体内容如下...

• 2021-05-30

61浏览

0评论

在react项目中使用antd的form组件,动态设置input框的值

问题：创建账号时，输入账号后不搜索直接保存，提示查询后，再点搜索就不能搜索这个账号了原因：点击保存之后，对表单进行了验证，导致之后请求的数据无法在更新到input框中，也就是说即使...

• 2021-05-30

50浏览

0评论

React实现todolist功能

一、index.jsReactDOM.render( <React.StrictMode> <TodoList /> </React.StrictMode>, document.getElementById('root'));二、TodoList1、constructorconstructor(props)...

• 2021-05-30

87浏览

0评论

React使用emotion写css代码

简介：
emotion是一个JavaScript库，使用emotion可以用写js的方式写css代码。在react中安装emotion后，可以很方便进行css的封装，复用。使用emotion后，浏览器渲染出来的标签是会加上...

• 2021-05-30

75浏览

0评论

Vite搭建React项目的方法步骤

前言
日常放鸽，火钳刘明这是一个基于 vite 搭建的 React 的项目，开发体验非常棒。创建一个 Vite 项目
yarn create @vitejs/app如上图，选择了 react-ts 预设模板，如果出现下图一...

• 2021-05-30

42浏览

0评论

react项目从新建到部署的实现示例

开展新项目本文主要记录最近工作一个新项目从0-1的过程，主要记录3个节点，选型、运行时、上线。项目选型
react 脚手架初始化，社区比较火的有cra（create-react-app）和umi，从以下几...

• 2021-05-30

61浏览

0评论

一百多行代码实现react拖拽hooks

前言
源码总共也就一百多行，看完这个大致可以理解一些成熟的react拖拽库的实现思路，比如react-dnd，然后你上手这些库的时候就非常快了。使用hooks实现的大致效果动图如下：我们的...

• 2021-05-30

39浏览

0评论

React html中使用react的两种方式

基本使用<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>hello</tit...

• 2021-05-30

118浏览

0评论

React Hook的使用示例

这篇文章分享两个使用React Hook以及函数式组件开发的简单示例。一个简单的组件案例
Button组件应该算是最简单的常用基础组件了吧。我们开发组件的时候期望它的基础样式能...

• 2021-05-30

135浏览

0评论

React实现登录表单的示例代码

作为一个Vue用户，是时候扩展一下React了，从引入antd、配置less、router，终于实现了一个简单的登录表单。代码如下：import React from 'react';import { Input, Button, message...

• 2021-05-30

59浏览

0评论

react hooks入门详细教程

State Hooks案例：import { useState } from 'react';function Example() { const [count, setCount] = useState(0);//count:声明的变量；setCount：改变count值的函数；0：count的初...

• 2021-05-30

117浏览

0评论

React+Antd 实现可增删改表格的示例

最近写了一个小东西，模仿自己原先用vue写的项目改成react语法。写了一个可编辑的表格，期间磕磕碰碰的，打算把bug记录下。先把效果图和代码贴上去，主要用的是react+antdtable表格...

• 2021-05-30

54浏览

0评论

详解react应用中的DOM DIFF算法

前言
对我们搞前端的来说，目前最流行的两大前端框架毫无疑问当属React和Vue，对于这两大框架，想必大家也是再熟悉不过了。然而，这两大框架无一例外的全部放弃使用传统的DOM技术，却...

• 2021-05-30

48浏览

0评论

React State状态与生命周期的实现方法

一、实现组件的方法:组件名称首字母必须大写1.通过JS函数方式实现组件<div id="app"></div><script type="text/babel"> var ReactDiv = document.getElementById('app');...

• 2021-05-30

57浏览

0评论

React antd tabs切换造成子组件重复刷新

描述：Tabs组件在来回切换的过程中，造成TabPane中包含的相同子组件重复渲染，例如：<Tabs activeKey={tabActiveKey} onChange={(key: string) => this.changeTab(key)} type="card...

• 2021-05-30

99浏览

0评论

深入理解React Native核心原理(React Native的桥接（Bridge)

在这篇文章之前我们假设你已经了解了React Native的基础知识，我们会重点关注当native和JavaScript进行信息交流时的内部运行原理。主线程在开始之前，我们需要知道在React Nati...

• 2021-05-30

45浏览

0评论

React.cloneElement的使用详解

因为要接手维护一些项目，团队的技术栈最近从 vue 转向 react ，作为一个 react 新手，加上一向喜欢通过源码来学习新的东西，就选择了通过阅读 antd 这个大名鼎鼎的项目源码来学习...

• 2021-05-30

43浏览

0评论

详解对于React结合Antd的Form组件实现登录功能

一、React 结合 Antd 实现登录功能
引入所需的 Antd 组件，代码如下所示：
import { Form, Icon, Input, Button, message } from 'antd'在 Login.jsx 中，创建一个 Login 组件。...

• 2021-05-30

53浏览

0评论

使用 React 和 Threejs 创建一个VR全景项目的过程详解

最近我在学习使用 React 配合 Three.js 来搭建一个可以浏览720全景图片的项目
实现的是加载一张 2:1 的720全景
分享一下我的创建过程一、搭建框架并安装需要的插件npx crea...

• 2021-05-30

78浏览

0评论

如何使用Redux Toolkit简化Redux

了解Redux Toolkit，这是用于高效Redux开发的经过验证的工具集。在本文中，你将看到为什么Redux Toolkit值得React社区更多的关注。React和Redux被认为是大规模React应用中管理...

• 2021-05-30

55浏览

0评论

react中常见hook的使用方式

1、什么是hook？
react hook是react 16.8推出的方法，能够让函数式组件像类式组件一样拥有state、ref、生命周期等属性。2、为什么要出现hook？
函数式组件是全局当中一个普通函数...

• 2021-05-30