![](https://img-blog.csdnimg.cn/20201014180756754.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
React
喜樂的CC
一窍不通没人会帮你醍醐灌顶
展开
-
[ react / typescript ]无法找到模块“xxx.js”的声明文件 / 模块“umi”没有导出的成员“connect” 的解决办法
一劳永逸的办法, 在根目录 tsconfig.json下配置:"compilerOptions": { "noImplicitAny": false // 添加这个 },但是不建议, 原因是:我应该使用noImplicitAny TypeScript编译器标志吗?原创 2021-05-25 17:46:22 · 8413 阅读 · 2 评论 -
[js] node命令运行带参数页面无法获取到process.argv使用webpack配置的解决办法
框架: create-react-apppackage.json文件原配置如下:"scripts": { "start": "node scripts/start.js", },一: 场景重现1. 按照node正常流程带参配置如下:"scripts": { "start": "node scripts/start.js --http_env uat", },2. 页面获取不到console.log(process.argv) // []空数组...原创 2021-03-23 17:32:11 · 2300 阅读 · 0 评论 -
react 项目打包路径问题
可能项目放得位置不是根目录, 导致css, js的绝对路径找不到文件.如下配置即可解决:package.json文件添加"homepage":"." //配置打包文件的路径是相对当前目录为根目录注意:需要react-scripts@0.9.0以上版本。...原创 2021-03-18 19:42:15 · 2629 阅读 · 0 评论 -
[React] 复制粘贴文本 基于原生JavaScript
import React from 'react';import './index.css';/** * 单击复制文本到剪切板 * @text {String} 需要复制的文本内容 * @children {Node} 渲染的Dom元素 */class copyClipboard extends React.Component { constructor(props) { super(props); this.state = { offsetLeft: 0,.原创 2021-02-19 17:26:06 · 357 阅读 · 0 评论 -
antd-admin-pro umi 突然热更新失效无法自动编译的解决办法
场景:项目一直用着正常, 突然有一天失效了, 网上的办法不适用, 查看了umi文档解决(可能并不适合所有人)我的场景是首次运行保存会热更新,随后就要手动刷新, 开发中偶尔很难得的触发自动刷新.解决办法:在config/config.dev.ts 或 config/config.ts 文件内加上fastRefresh:{}即可官方文档:https://umijs.org/zh-CN/docs/fast-refresh...原创 2021-02-06 17:54:53 · 4440 阅读 · 4 评论 -
Pre-Commit for Git Hooks 之正确关闭提交代码检测
当提交代码如下报错时:$ git commit -m '修复线上bug' > running pre-commit hook: npm run precommitg> invoive-admin@1.1.1 precommit F:\zhdProgram\3wenlvma\simple-ant-admin> lint-staged[STARTED] Preparing...[SUCCESS] Preparing...[STARTED] Running tasks...原创 2021-02-06 15:48:13 · 4670 阅读 · 1 评论 -
[React hooks] Antd Form: Instance created by `useForm` is not connected to any Form element.Forget t
场景:Warning: Instance created by `useForm` is not connected to any Form element. Forget to pass `form` prop官方解释: 这是因为你在调用 form 方法时,Modal 还未初始化导致 form 没有关联任何 Form 组件Form包裹在Modal中:如果你的Form表单是包裹在Modal对话框中, 官方解决办法是:通过给 Modal 设置forceRender将其预渲染...原创 2021-02-05 17:07:58 · 6668 阅读 · 5 评论 -
Ant Design Pro的Umijs自动打开浏览器配置
umi3.x 版本:Github issue:umijs3 启动后如何自动打开浏览器(3.x版本github官方回复不支持自动打开浏览器, 不知道为什么有这种反向升级)-解决办法:开发环境安装Node包npm i open-browser-webpack-plugin --save在config.ts配置文件的defineConfig中加入chainWebpack(memo, { env, webpack, createCSSRule }) { env === 'deve.原创 2021-01-14 20:20:48 · 1945 阅读 · 2 评论 -
antd4.x [antd: Switch] `value` is not a valid prop, do you mean `checked`? 解决办法
antd4.x版本 出现Warning: [antd: Switch] `value` is not a valid prop, do you mean `checked`?网络上都是3.x版本的处理办法, 4.x解决办法是添加valuePropName属性:<Form.ItemvaluePropName="checked"><Switch /></Form.Item>举一反三, 如Upload组件antd4.x版本 出现 Warnin...原创 2021-01-12 16:54:11 · 10272 阅读 · 2 评论 -
validateDOMNesting(...): <div> cannot appear as a descendant of <p>
解决办法:p标签内只能包裹内联元素, 不能包裹块级元素.原因:拓展:stackoverflow的解答原创 2020-09-30 14:18:59 · 12635 阅读 · 0 评论 -
Invalid attempt to spread non-iterable instance.non-array objects must have a [Symbol.iterator]()
Uncaught (in promise) TypeError: Invalid attempt to spread non-iterable instance. In order to be iterable, non-array objects must have a [Symbol.iterator]() method我是在react中this.setState(...e), 拓展运算符了一个e, e是一个对象, 而对象是没有iterable的.比如在控制台输入[...{a:1}], 就会.原创 2020-09-28 17:22:32 · 2359 阅读 · 0 评论 -
清除Antd中Form表单的Input输入框保存的历史输入记录
默认鼠标focus聚焦效果:需要实现的效果(清除了历史记录下拉框):解决办法://默认代码: <Form.Item label="商品名称" name="name" rules={[{ required: true }]} > <Input /> </Form.Item>//清除输入记录代码: ...原创 2020-09-11 14:37:01 · 6970 阅读 · 2 评论 -
[React] 复制粘贴文本 基于原生JavaScript
效果图:React安装:$ npm install --save react-copy-clipboard调用和参数请点击: Npm包地址源码获取点击: Github地址源码import React from 'react';import './index.css';/** * 单击复制文本到剪切板 * @text {String} 需要复制的文本内容 * @children {Node} 渲染的Dom元素 */class copyClipboard extends Reac原创 2020-08-26 18:04:22 · 290 阅读 · 0 评论 -
[React] Maximum update depth exceeded
Uncaught (in promise) Error: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.这个错误是由于其他组件(..原创 2020-06-01 15:11:32 · 5456 阅读 · 0 评论 -
[React] Cant perform a React state update on an unmounted component 是props传值数据修改了引出的bug
Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in the componentWillUnmount method.起因:解决办法:...原创 2020-05-28 10:57:04 · 575 阅读 · 0 评论 -
Antdesign 之 upload组件上传校验失败还继续成功上传的解决办法
问题代码以官方文档(3.x)代码为例, 如下校验上传图片格式和大小,但事实上图片照样上传成功:function beforeUpload(file) { const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png'; if (!isJpgOrPng) { message.error...原创 2020-04-30 16:40:06 · 6156 阅读 · 4 评论 -
react之antd自定义表单控件(如form + table如何使用)
Form(表单)Funtion组件代码:const FormComp = () => { //点提交按钮就会触发这个事件并打印Form表单的值 const onFinish = values => { console.log('Received values from form: ', values); }; return (...原创 2020-04-21 19:49:01 · 9527 阅读 · 0 评论 -
React三层多选框联动/三级复选框联动实现方法 (Vue同理数据驱动思想)
效果如图:代码如下(有ant design就可以跑了):import { Checkbox, Collapse } from 'antd';import React, { PureComponent } from 'react';//假设这是后端返回的数据const params = { "authTree": [ { "authName": "商场...原创 2020-04-18 11:07:21 · 4127 阅读 · 6 评论 -
Antd Design的ConfigProvider全局化配置无效问题
如果是配置国际化问题, 官网和百度有很多解决办法, 可以关闭了.如果是其他配置无效,那么请继续看.首先检查你的antd版本, 每个版本支持的配置都不一样, 越高版本支持越多.如果你遇到配置无效, 一定要检查你现在的antd包的版本和你现在看的官网的版本文档, 请对应做配置....原创 2020-04-14 16:31:58 · 10766 阅读 · 0 评论 -
React 之 state 数据改变页面不更新未重新渲染的 7 种情况 及 解决办法
1. 在redux中修改state页面未更新解决办法: 请检查你的state是不是直接改变原state的, 记住不要直接修改state原因: reducer 中 state 是引用,在 reducer 中改变 state 是错误的, 虽然 store 里面的 state 是改变了,但是 react - redux 会认为dispatch 前后的 state 没有改变,就不会重新渲染页...原创 2020-04-02 18:24:30 · 56658 阅读 · 13 评论 -
React 之 Error: Function components cannot have refs. Did you mean to use React.forwardRef()?解决办法
原因是funtion组件(无状态组件)不能使用refs删除掉组件内的ref="xxx"原创 2019-11-28 10:59:40 · 6717 阅读 · 0 评论 -
React 之 Expected an assignment or function call and instead saw an expression 解决办法
两个问题:Line 13:57: Expected an assignment or function call and instead saw an expression no-unused-expressionsLine 24:68: 'e' is not defined no...原创 2019-11-26 10:37:33 · 46435 阅读 · 1 评论 -
Yarn 使用方法
tips: 一般react 配 antd,typescript 和 yarn初始化一个新项目yarn init添加依赖包yarn add [package]yarn add [package]@[version]yarn add [package]@[tag]将依赖项添加到不同依赖项类别中分别添加到devDependencies、peerDependencie...翻译 2019-11-25 16:17:30 · 673 阅读 · 0 评论 -
React/Vue 之 'componentName' is defined but never used no-unused-vars
以下demo组件名用Form做演示解决办法1:命令行报错如下:翻译:已定义“Form”,但未使用已定义变量解决方式如下:解决办法2 :命令行末尾提示如下:翻译:若要忽略,请在前面的行中添加 //eslint disable next line解决方式如下:解决办法3:找到.eslintrc.js 文件, 在rul...原创 2019-11-22 11:04:56 · 12582 阅读 · 2 评论 -
react脚手架不eject修改配置文件如@地址别名alias的方法
在不 'eject' 也不创建额外 react-scripts 的情况下修改 create-react-app 内置的 webpack 配置,然后你将拥有 create-react-app 的一切特性,且可以根据你的需要去配置 webpack 的 plugins, loaders 等。找到根目录的config-overrides.js文件const { override, addWebp...原创 2019-11-21 17:12:08 · 1719 阅读 · 0 评论