React论坛 今日: 0|主題: 520|排名: 77 

一、什么是useContext 在 React class 式中父组件向子组件传递参数可以通过 props ，context。但是在函数式组件中需要向多层组件传递数据时，此时就可以使用 useContext/ 二、useContext的作用 1.useContext可以帮助我们跨越组件层级直接传递变量，实现数据共享。 这里要注意的是，很多同学觉得可以使用useContext结合us ...

其他章节请看： react 高效高质量搭建后台系统 系列 登录 本篇将完成登录模块。效果和 spug 相同： 需求如下： 登录页的绘制 支持普通登录和LDAP登录 登录成功后跳转到主页，没有登录的情况下访问系统会重定向到登录页，登录成功后再次回到之前的页面。系统会话过期后，请求会重定向到登录页。 Tip：退出登录在进入系 ...

总览 当我们把多个子元素传递给一个只期望有一个React子元素的组件时，会产生"React.Children.only expected to receive single React element child"错误。为了解决该错误，将所有元素包装在一个React片段或一个封闭div中。 这里有个示例来展示错误是如何发生的。 // App.js import React from 'react'; function Butto ...

总览 产生"Too many re-renders. React limits the number of renders to prevent an infinite loop"错误有多方面的原因： 在一个组件的渲染方法中调用一个设置状态的函数。 立即调用一个事件处理器，而不是传递一个函数。 有一个无限设置与重渲染的useEffect钩子。 这里有个示例来展示错误是如何发生的： import {useSt ...

Jay 是一位经验丰富并且对质量要求很高的开发者，对 Angular、React 等多种框架都很熟悉，我们在开源社区认识，在我做开源社区运营的过程中，Jay 给了我很多帮助，他也是 React DevUI 开源组件库的创建者。 2021年11月，由 Jay 主导发起了 React DevUI 开源组件库项目，经过一年多的孵化🐣，终于在2022年11月23日发布 18.0. ...

react-rnd 是一个React 组件库，可以提供一个可调整大小与可拖拽的组件。 一、安装 使用 npm npm i -S react-rnd 使用 yarn yarn add react-rnd 二、使用方法 基本用法 <Rnd default={{ x: 0, y: 0, width: 320, height: 200, }} > Rnd </Rnd> 使用position和size的例子 <Rnd size={{ width: t ...

壹 ❀ 引 React Developer Tools 是 React 官方推出的开发者插件，可以毫不夸张的说，它在我们日常组件开发中，对于组件属性以及文件定位，props 排查等等场景都扮演者至关重要的角色；毋庸置疑，熟练使用React Developer Tools 能让你的日常开发更加高效。 而我对于目前前端团队同学做了随机调查，询问了大家对于 React D ...

React 全家桶-React基础 用于构建用户界面的JavaScript库。 facebook开源、组件化、声明式编码、React Native移动端开发、虚拟DOM+Diffing算法 官网：https://react.docschina.org/ 第一章：React的基本使用 1.相关js库 react.js：React核心库 React-dom.js：提供操作DOM的react扩展库 Babel.min.js：解析JSX语法代码转为J ...

一、项目背景 企业日常工作中需要制作大量的报表，比如商品的销量、销售额、库存详情、员工打卡信息、保险报销、办公用品采购、差旅报销、项目进度等等，都需要制作统计图表以更直观地查阅。但是报表的制作往往需要耗费大量的时间，即使复用制作好的报表模版，一次次周期性对数据的复制粘贴操作也很耗人，同时模版在此过程 ...

前言 在当前工业4.0和智能制造的产业升级浪潮当中，智慧大屏无疑是展示企业IT成果的最有效方式之一。然而其背后怎么能缺少ECharts的身影呢？对于React应用而言，直接使用ECharts并不是最高效且优雅的方式，而echarts-for-react则是针对React应用对ECharts进行轻量封装和增强的工具库。 echarts-for-react的源码非常精简，本 ...

首先说一下网上其他的编辑器： 轻量级： 1.codeMirror ：文档和代码对不上，没有diff功能 github地址：https://github.com/codemirror/CodeMirror 示例代码：https://uiwjs.github.io/react-codemirror/ 2.react-code-diff 最近一次维护2018年，直接报错无法使用 重量级： 1.monaco ：微软出品，值得信赖 github地址：https ...

React Or Taro 项目配置Eslint校验 一、下载Eslint相关deps依赖项； npm install --save-dev eslint-plugin-prettier eslint-plugin-jsx-a11y eslint-config-airbnb 注意：由于eslint-config-airbnb目前版本已经超过19，会出现一个小问题，箭头函数和命名函数会被Eslint 提示冲突，这是由于19版本的升级导致的解决方案 ...

github：https://github.com/securingsincity/react-ace star ： 3.6k npm : weekly downloads 280,045 DEMO of React Ace: https://securingsincity.github.io/react-ace/ install npm install react-ace ace-builds // or yarn add react-ace ace-builds Basic Usage import React from "react"; import { render } ...

一直在用react进行编码，下面来看一下react框架的源码，了解一下react框架的思路。 首先，看下packages/react文件夹下的代码，也就是React 通过packages/react/index.js,可以大致了解到有哪些常用的react api export { __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED, act as unstable_act, Children, Compone ...

最近我们公司接到一个客户的需求，要求为正在开发的项目加个功能。项目的前端使用的是React，客户想添加具备Excel 导入/导出功能的电子表格模块。 经过几个小时的原型构建后，技术团队确认所有客户需求文档中描述的功能都已经实现了，并且原型可以在截止日期前做好演示准备。但是，在跟产品组再次讨论客户需求时，我们发现 ...

前言 使用 Vite 已经有两年了，期间使用它开发过单页面应用，也开发过浏览器扩展插件，对比日常工作中用到的 webpack 构建速度大幅提升，开发体验也好很多。 虽然相比于 webpack 来说简单了很多，但是仍然有一些配置需要记录一下，以便之后可以快速搭建一个本地开发构建的环境。 使用 create-vite 脚手架生成基础模板 运行 ...

本项目主要基于Elux+Antd构建，包含React版本和Vue版本，旨在提供给大家一个简单基础、开箱即用的后台管理系统通用模版，主要包含运行环境、脚手架、代码风格、基本Layout、状态管理、路由管理、增删改查逻辑、列表、表单等。 为保持工程简单清爽，方便二次开发，只提供基本版式和通用组件，不集成各种眼花缭乱的组件，需 ...

前言 前段时间我需要实现大文件上传的需求，在网上查找了很多资料，并且也发现已经有很多优秀的博客讲了大文件上传下载这个功能。 我的项目是个比较简单的项目，并没有采用特别复杂的实现方式，所以我这篇文章的目的主要是讲如何最简单地实现大文件上传与下载这个功能，不会讲太多原理之类的东西。 大文件上传 在实际场景中 ...

前言 最近利用闲暇时间把webpack系统的学习了下，搭建出一个react环境的脚手架，写篇文章总结一下，帮助正在学习webpack小伙伴们，如有写的不对的地方或还有可以优化的地方，望大佬们指出，及时改正。 git项目地址：https://github.com/handsomezyw/my-webpack 初始化项目 新建文件夹起名为my-webpack（文件夹名字任意取 ...

前言： 　　实现一个在react项目中页面展示代码编辑器的效果。 codemirror： 　　使用JavaScript为浏览器实现的多功能文本编辑器。codemirror作用：专门用于编辑代码，并带有实现更高级编辑功能的多种语言模式和附加组件 实现效果       1. 首先从react-codemirror2中引入Codemirror组件　　 import {UnCo ...