在打包之前,在 package.json 中 private 下(位置任意)添加"homepage": "./" 这样在你点击index.html时候路径没有问题不会报错,但是页面可能还是空白的 然后将项目中的引用路由时候的BrowserRouter改为HashRouter,所有用到的地方都要改 然后执行yarn build 或者 npm run build
一、背景最近在公司开发时，遇到需要自定表单，并且自定表单中的单选和复选选项需要用户可以自定义拖拽排序，经过一个星期的查阅各种资料和实践，写个总结！ 二、实践经过一系列的查询，发现React Sortable与array-move可以实现这一功能！ 附上官网链接http://cl
实现上拉加载 主要是通过计算 判断滚动条是否滚动到底部, 来进行触发加载事件的 需要注意的是 onScrollEvent 方法中所用到的变量, 不能 用 state 和 useState 来控制, 不能监听到他们的变化 元素宽高 （1）clientHeight、clientWidth→元素宽高（height+padding，不包含边框
前言：使用AsyncStorage来设置本地缓存 引入： import { AsyncStorage } from "@react-native-community/async-storage"; 使用： await AsyncStorage.setItem('user_img', image.path); 报错： [TypeError: undefined is not an object (evaluating '_asyncStorage.
TS2786: 'DraggableCore' cannot be used as a JSX component. Its instance type 'DraggableCore' is not a valid JSX element. The types returned by 'render()' are incompatible between these types. Type 'React.Reac
搭建本地开发环境 安装nodejs 按照 Create React App 安装指南创建一个新的项目 npx create-react-app react-three-demo 删除掉新项目中 src/ 文件夹下的所有文件。（不要删除整个 src 文件夹，删除里面的源文件。） 安装路由依赖包和threejs依赖包 # tips: 注意版本兼容问题
基于移动端需要扫码签名的功能，这里记录一下。 1、使用 react-signature-canvas 插件，npm i react-signature-canvas --save 2、此功能签名后生成的图片是base64格式，如需其他格式，可参考文档修改 3、封装的组件代码 import { SignatureCanvasWrapper } from './style'; import Re
正文从这开始~ 总览 当我们对一个不是数组的值调用map()方法时，就会产生"TypeError: map is not a function"错误。为了解决该错误，请将你调用map()方法的值记录在console.log上，并确保只对有效的数组调用map。 这里有个示例来展示错误是如何发生的。 const App = () => { const o
故事背景 最近在做一个充值的页面，需求方很早之前便提过，需要对页面进行一定的安全保护，恰巧今天项目的小程序方面遭受到了XSS攻击，便想着深入一下前端安全方面。原本想了涉及到金钱交易的报文，已经加密了一层，但这其实也算是前后端的一种安全防范，那对于前端，难道没有任何其他的安全措施
TypeError: Cannot read property 'Name' of null at faultOptionForm.jsx:658 at Array.map (<anonymous>) at faultOptionForm.jsx:656 at la (react-dom.production.min.js:157) at Va (react-dom.production.min.js:180) at Ql (react-
1. react antd-mobile 适配移动端 参考：https://www.jb51.net/article/215386.htm 1.报错：Error: require postcss-flexbugs-fixes use postcss 8 原因：postcss-flexbugs-fixes 版本太高 解决：npm i postcss-flexbugs-fixes@3.2.0 -S 2.报错：plugin is not a funtion
useEffect 没有依赖项，那它会在每次render之后执行 模拟componentDidMount-useEffect依赖[] 模拟componentDidUpdate-useEffect无依赖，或者依赖[a, b] 模拟componentWillUnMount-useEffect中返回一个函数
react 代码优化千次阅读 2018-08-19 19:33:37 1.减少setstate：setstate会增加render的次数，从而影响性能。如果涉及到与视图层无关的属性，直接当做class实例的属性，而不是state的状态。这样改变这个属性不会造成页面重新的渲染。 小结：render需要用到的属性放在state和props中。 2.浏
正文从这开始~ 总览 在React中，当我们试图访问类型为HTMLElement 的元素上不存在的属性时，就会发生Property 'X' does not exist on type 'HTMLElement'错误。为了解决该错误，在访问属性之前，使用类型断言来正确地类型声明元素。 这里有三个例子来展示错误是如何发生的。 // App.tsx
正文从这开始~ 类型守卫 使用类型守卫来解决React中useRef钩子“Object is possibly null”的错误。比如说，if (inputRef.current) {} 。一旦null被排除在ref的类型之外，我们就能够访问ref上的属性。 下面是一个错误如何发生的示例。 import {useEffect, useRef} from 'react'; ex
注：本文来源 https://blog.csdn.net/weixin_39065287/article/details/123895097 定义一个工具： import { Dimensions } from 'react-native'; // 获取竖屏模式的宽度 const deviceWidthDp = Dimensions.get('window').width; // UI 默认给图是750 const uiWidthPx = 750; //传入
正文从这开始~ 总览 组件不能作为JSX组件使用，出现该错误有多个原因： 返回JSX元素数组，而不是单个元素。 从组件中返回JSX元素或者null以外的任何值。 使用过时的React类型声明。 返回单个JSX元素 下面是一个错误如何发生的示例。 // App.tsx // ⛔️ 'App' cannot be used as a JSX
关键代码： const [selectedKeys, setSelectedKeys] = useState([]); const [selectRows, setSelectRows] = useState([]); const [selectedSingleRows, setSelectedSingleRows] = useState([]); //单条编辑 const rowSelection = { // type: 'checkbox
前言：打算整个新的rn（react-native）项目来测试，故此 npx react-native init myapp ，没想到报了个错误，具体如下： Error: Command failed: yarn add react-native --exact // 错误：命令失败：纱线添加反应本机--精确 除此之外还有一行： The engine "node" is incompatible with this modul
input在输入时，控制台出现 warning 意思是： Input 组件从一个非受控组件变成了一个受控组件。 造成这个问题的原因是：初始化时，Input 组件的value值为undefined。 所以，要解决该问题，我们只要在初始化时，Input 组件的value值为undefined时赋值一个空字符串''即可。 <input type="text"
1:实现简版的 useState每次调用顺序索引必须一样返回初始状态变量，和更改状态方法调用更改状态方法，更新状态并重新渲染let lastStates = []let index;function useState(initValue) { let state = lastStates[index] || initValue; let currIndex = index; let setState = (n
也是出于那些所谓面试老谈到这个，所以就打算自己来好好理解下这个内容。 首先，我们先看官方文档 文档提到，具体而言，高阶组件是参数为组件，返回值为新组件的函数。 接下来官方文档举得例子有点难以下咽，毕竟没能带来直观的感觉。我学习东西还是喜欢拿最最简单的东西举例（应该是我技术渣
在react项目中引入json动画，发现图片路径找不到 打开json文件 解决方案：把u删掉，p改成网络地址或者base64
安装：npm install --save react-lottie 实现： import { Component } from "react"; import ReactDOM from 'react-dom' import Lottie from 'react-lottie'; import animationData from './images/云_bmp.json' class App extends Compo
