React
文章平均质量分 50
等下吃什么?
余幼时即厌学
展开
-
React 嵌套类名样式不生效
React 嵌套类名样式不生效原创 2024-09-12 10:33:04 · 469 阅读 · 0 评论 -
React Context 函数组件的主流写法
内容出自《React学习手册(第二版)- 中国电力出版社》,强烈推荐*****原创 2023-04-02 00:07:58 · 220 阅读 · 1 评论 -
Jquery + dom-to-image 无损打印页面内容、保留页面样式
装插件jquery:yarn add jquerydom-to-image:yarn add dom-to-image把jQuery.print.js 依赖包放到项目里import $ from 'jquery';function getjQueryObject(string) { // Make string a vaild jQuery thing let jqObj = $(""); try { jqObj = $(string) .clone(..原创 2021-12-30 11:48:35 · 827 阅读 · 0 评论 -
dva.js 页面与仓库的连接
第一种连接方式state中存放了所有models(全局仓库)中的statemapStateToProps方法会将我们拿到的state.product return出来,合并到当前组件的props中第二种连接方式第三种连接方式原创 2020-07-31 17:05:17 · 246 阅读 · 0 评论 -
Umi 3.x 使用百度地图服务
需求描述需要在前端页面中使用地图定位,所以在前端umi项目中使用百度地图服务,由于umi项目默认没有入口的html文件,所以无法通过常规的在head中加入外链js的方式使用解法方法用umi-plugin 插件的方式把链接加到页面上在umirc.ts中导入本地新建的插件文件customPlugin.js/*** umirc.ts,umi项目默认配置文件*/import { defineConfig } from 'umi';export default defineConfig({原创 2021-03-10 20:44:29 · 980 阅读 · 2 评论 -
styled-components 的用法
用于给标签或组件添加样式给标签或组件添加样式import styled from 'styled-components'// styled.button : 给button标签添加样式 const Button = styled.button` background: palevioletred; border-radius: 3px; border: none; color: white;`// styled(Button) : 给Button组件添加样式 const T翻译 2021-11-28 22:56:53 · 1902 阅读 · 0 评论 -
React 性能优化方法 ~ PureComponent | shouldComponentUpdate | memo
l原创 2021-06-28 17:57:34 · 178 阅读 · 0 评论 -
React context使用方法
Context常见的数据流动state: 数据在组件内流动props: 数据在父子组件间流动redux:数据在单一数据源和组件间流动context:数据在Context和使用context的组件间流动 || Provider和使用context的组件间流动context和redux的区别context的初始数据( React.createContext() )不能变更redux由于是单一数据源,可通过dispatch改变数据context数据不稳定,取决于最近的Prov原创 2021-06-28 00:10:41 · 216 阅读 · 2 评论 -
React 生命周期(v17.0.2)
import React from 'react';class Header extends React.Component { /* 挂载阶段:组件实例被创建 -> 插入Dom中 - constructor() - static getDerivedStateFromProps() - componentWillMount() --- React 16.3废弃,用getDerivedStateFromProps原创 2021-06-16 22:41:13 · 340 阅读 · 6 评论 -
React portal传送门的用法
portal把渲染的节点挂载到任意地方封装的传送门组件import React from 'react';import * as ReactDOM from "react-dom";/** * 全局通用传送门 * @param {string} target - 挂载到哪里 e.g. #myDiv , 缺省挂载到body最后 * @param {string} tag - 包裹的标签,e.g. span,缺省为div * @param {string} cl原创 2021-06-14 19:55:40 · 360 阅读 · 0 评论 -
React forwardRef的使用方法
作用与注意点父组件创建一个ref对象,绑定给子组件中的Dom元素或class组件forwardRef只能包裹函数组件,类组件不能用函数组件是没有实例的父组件获取子组件中Dom元素实例import React, { useRef } from 'react';import Content from './content';const Home = () => { // 创建一个Ref对象 const connectRef = useRef(null); const h原创 2021-06-12 23:20:29 · 7006 阅读 · 3 评论 -
React 高阶组件HOC使用总结
HOC(高阶组件)/* HOC(高阶组件): 接收一个组件,返回包装后的组件(增强组件) - 不是React API - 是一种设计模式,类似于装饰器模式 - ≈ Mixin && > Minxin const 包装后的组件 = 高阶组件(被包装的组件); // e.g. const Wrapper = withRouter(NavBar); 高阶组件会把所有接收到的props,传递给被包装的组件(透传) ref 和 key 类似,不原创 2021-06-12 18:15:07 · 335 阅读 · 0 评论 -
React 错误边界ErrorBoundary的使用方法
错误边界的作用捕获子组件的渲染异常,在渲染页面出错时,提供备用UI适用与不适用适用组件没有return一个有效值???不适用事件语法错误异步方法抛出的错误服务端渲染错误边界本身抛出的异常测试的页面理想情况:在某个组件发生错误时,渲染一个备用UI然后更多时候是页面直接奔溃,或者渲染了备用UI后再奔溃错误边界捕获的异常// error错误信息Error: Footer(...): Nothing was returned from render. This usua原创 2021-06-07 23:22:52 · 2545 阅读 · 5 评论 -
虚拟DOM 比 原生DOM快吗?
虚拟Dom不比原生DOM快。没有任何框架可以比手动优化DOM更快,因为框架的DOM操作层需要应对任何上层可能产生的操作,所以他的实现需具有普适性虚拟DOM的目的:当数据不管怎么变化,都能以最小的代价来更新DOM,在不进行手动优化的情况下,给你提供过得去的性能框架的意义:为你掩盖底层的DOM操作,让你用更声明式的方式来描述你的目的,从而使你的代码更好维护...原创 2021-04-12 17:37:30 · 940 阅读 · 0 评论 -
window umi react项目使用mkcert自签名证书实现本地https访问
测试项目为create-react-app创建的项目,package.json如下{ "name": "creat-react-app", "version": "0.1.0", "private": true, "dependencies": { "@testing-library/jest-dom": "^5.11.4", "@testing-library/react": "^11.1.0", "@testing-library/user-event": "^原创 2021-03-30 22:43:59 · 1936 阅读 · 0 评论 -
React 使用iconfont
选中适合的图标加入购物车打开购物车下载解压在src下新建,static/font 文件夹,把上面选中的文件全部复制进去在需要的页面使用import '../../static/font/iconfont.css';export default const Xpage = (props) => { return ( <div> <i className="iconfont icon-location" /> </div>.原创 2021-03-28 14:06:21 · 144 阅读 · 0 评论 -
React函数式组件,使用react-html-table-to-excel实现导出Excel功能
react-html-table-to-excel 简介安装 yarn react-html-table-to-excel属性说明属性类型描述tablestring需要导出的table的id,需要为table标签添加,两者要对应filenamestringExcel文件的名字sheetstringExcel文件里面Sheet的名字idstring添加到按钮上的id属性classNamestring添加到按钮上的class属性but原创 2021-03-27 18:03:59 · 1672 阅读 · 0 评论 -
Antd 4.x 组件汉化
Calendar 日历组件汉化主要代码import { ConfigProvider } from 'antd';import zhCN from 'antd/lib/locale/zh_CN';import moment from 'moment';import 'moment/locale/zh-cn';<ConfigProvider locale={zhCN}> <Calendar /></ConfigProvider>前后对比其他组原创 2021-03-17 15:25:34 · 234 阅读 · 0 评论 -
React 5分钟知识体系
ECMAScript 6变量声明const 用于声明常量,let 用于声明变量,他们都是块级作用域。const a = 1;let b = 1;模板字符串用于拼接字符串。let a = 'hello';let b = 'hello';console.log('print:' + a + b);let c = `print:${a}${b}`// 注意这个不是引号,键盘 esc 下面那个按键默认参数function test(a = 'world') { console.l转载 2021-01-28 15:59:38 · 154 阅读 · 0 评论 -
Umi 入门教程
项目结构src/.umi/src/.umi-production/src/**/*.test.js & *.e2e.jssrc/global.(j|t)sxsrc/global.(css|less|sass|scss).umirc.js 和 config/config.js.env页面跳转Umi提供了两种跳转方式命令式:history.push('/list')声明式:<Link to="/list">Go to list page</Link&转载 2021-01-28 14:09:25 · 15103 阅读 · 1 评论 -
React Uncaught SyntaxError: Unexpected token ‘<‘
问题描述项目运行,控制台出现错误Uncaught SyntaxError: Unexpected token '<',但是项目运行正常解决方法经过排查,发现是入口的html文件中引入了两个空的js文件把空的js文件注释或删除就行了...原创 2021-01-25 17:00:24 · 1976 阅读 · 0 评论 -
Antd Mobile TextareaItem的autoHeight失效
问题描述TextareaItem里面存了一段很长的文字,设置了autoheight,但是需要用鼠标点一下才能展开问题解决获取textarea实例,强制获取焦点** * title: 通知详情 */import React, { Component } from 'react';import { connect } from 'dva';import { TextareaItem } from 'antd-mobile';import styles from './detail.les原创 2021-01-25 10:32:01 · 487 阅读 · 0 评论 -
React 如何在style={{ }}中添加calc属性
<List className={styles.container} style={{ height: 'calc(100vh - 120px)' }}>...</List>原创 2021-01-17 00:45:10 · 4877 阅读 · 1 评论 -
antd 按需加载 + 自定义主题
第一种按需加载yarn add babel-plugin-import在package.json里的babel里加入plugin配置,没有babel要npm run ejectnpm run eject报错: This git repository has untracked files or uncommitted changes删掉根目录下的隐藏文件.git文件夹,重新npm run eject第二种按需加载yarn add react-app-rewired customize-cr原创 2020-11-18 09:27:45 · 262 阅读 · 0 评论 -
antd3.x InputNumber内容为‘‘或null显示0
方法1用InputNumber中的formatter属性对数据进行处理把数据转换成number类型null和‘’都会转换成0方法2用this.props.form.setFieldsValue注意点:这里要延时执行,不然数据不能更新方法3用getFieldDecorator中的属性getValueFromEvent属性详细查看官网api:https://3x.ant.design/components/form-cn/#Form.Item...原创 2020-10-15 20:18:23 · 2161 阅读 · 0 评论 -
在旧项目中使用dva
博客原文:https://www.cnblogs.com/wx1993/p/11677764.html原创 2020-09-09 23:08:24 · 321 阅读 · 0 评论 -
antd 4.x Modal组件的一些坑
问题描述我的form实体是在modal里面的,modal开始设置了visible={this.state.modalVisible},初始值为false,在第一次打开modal,使用this.formRef.current.XXX就会报错 Cannot read property 'xxx' of null,只要我的modal打开关闭一次,后面使用this.formRef.current.XXX就没问题了解决方法方法1(失败)componentWillMount()设置modalVisible为tr原创 2020-09-05 16:14:41 · 3610 阅读 · 0 评论 -
antd v3~v4的表单控制(form.submit / setFieldsValue / getFieldValue ...)
最后附上antd官网的form组件,v3~v4的升级说明文档https://ant.design/components/form/v3-cn/转载 2020-09-01 11:29:13 · 922 阅读 · 0 评论 -
antd 用递归渲染左侧Menu菜单导航
原创 2020-08-17 16:48:44 · 936 阅读 · 0 评论 -
dva reducers修改state,同时更新视图
原创 2020-08-14 11:53:45 · 1342 阅读 · 0 评论 -
react dangerouslySetInnerHTML不对输出的html标签进行转义
原创 2020-08-12 14:39:58 · 842 阅读 · 0 评论 -
multi ./node_modules/af-webpack/lib/webpackHotDevClient.js ./src/Dropdowm.js Module not found: Can‘t
react项目,我修改一个文件的名字,doRefactor后运行就报错了,我改回来后也运行不了,应该是文件命名用了关键字,替换的时候可能把其他地方也改掉了解决方法1.去项目根目录下找到.webpackrc.js2.根据报错信息,搜索找不到的那个模块的文件名,如果找到就改回index.js,我的就行了项目入口不一定是index.js,根据实际更改如果在.webpackrc.js中找不到报错的模块名,那么这个方法不能帮到你...原创 2020-08-10 17:43:05 · 854 阅读 · 0 评论 -
warning:Please use `require(“history“).createHashHistory` instead of ......
1.修改node_modules→dva→lib→index.js2.重启项目原创 2020-08-10 11:00:42 · 1194 阅读 · 0 评论 -
antd form表单提交失效
Form标签要添加name属性原创 2020-08-07 09:18:04 · 721 阅读 · 0 评论 -
antd form-item的检验规则rules不生效
form-item 需要添加name属性原创 2020-08-07 09:11:38 · 8350 阅读 · 5 评论 -
dva Link跳转页面不刷新
import { Router, Route, Switch } from 'dva/router';import { BrowserRouter as Router, Route, Switch } from 'dva/router';原创 2020-08-06 15:51:21 · 560 阅读 · 0 评论 -
Cannot find module ‘less-loader‘ 解决方法
不要用 npm install less用 yarn add less less-loader --devnpm安装遇到的问题应该是网络问题,请求不到资源原创 2020-08-06 09:14:44 · 2228 阅读 · 0 评论 -
react脚手架项目,暴露webpack配置文件,使用less
暴露配置文件npm run eject如果报错,去项目根目录下,删除.git文件夹(隐藏文件夹),重新上一步使用less原创 2020-08-05 15:00:00 · 238 阅读 · 0 评论 -
moment.js TypeError: Object(...) is not a function
import { moment } from ‘moment’import moment from ‘moment’ √原创 2020-08-03 15:13:54 · 992 阅读 · 0 评论 -
npm run / yarn start 运行项目出错
1.快速删除node_modules文件夹1.1 全局安装rimraf:npm install rimraf -g1.2 到你的项目根目录下(即有node_modules的目录),执行命令:rimraf node_modules2.清除缓存npm cache clean --force3.重新安装依赖用 yarn 代替 npm install...原创 2020-08-03 10:49:11 · 1236 阅读 · 0 评论