react
qiphon3650
成功需要努力,知识源于分享!
展开
-
react forwardRef 导致 泛型丢失
react forwardRef 导致 泛型丢失网上没有找到合适的方案,看了 antd 的源码,实现方式如下:const ForwardTable = React.forwardRef(InternalTable) as <RecordType extends object = any>( props: React.PropsWithChildren<TableProps<RecordType>> & { ref?: React.Ref<HTMLD原创 2022-05-23 15:34:33 · 900 阅读 · 1 评论 -
redux clear store
redux clear storeredux 没有内置清除 store 的功能,需要手动实现,以下是其中一个方案const addClearToReducer = (reducer: any) => (state: {}, action: { type: string; payload: any }) => { if (action.type === CLEAR) { return {}; } else { return reducer(state原创 2021-11-15 20:02:58 · 654 阅读 · 0 评论 -
开发时代码如果出现代码报错,点击报错路径,编辑器打开指定文件(vscode)
将 vscode 添加到系统的环境变量中,保证 code [file] 能打开指定文件• 添加方法:vscode 中按 F1 -> 输入 shell command -> 选择install在项目的环境变量中加入如下代码# 添加环境变量到 env 文件# eg. just for vscodeREACT_EDITOR=code当代码报错时,点击报错的路径...原创 2021-03-09 13:34:57 · 350 阅读 · 0 评论 -
create-react-app 相关问题
create-react-app项目不会自动刷新页面# 添加之后会自动刷新FAST_REFRESH=false原创 2021-01-27 19:48:59 · 1353 阅读 · 3 评论 -
react阻止事件冒泡
react阻止事件冒泡// 这里的handleClick事件就合成事件<a ref="aaa" onClick={(e)=>this.handleClick(e)}>更新</a>// 原生事件document.addEventListener('click',e=>{ do something })阻止合成事件间的冒泡,用e.stopPropagation();<div ref="test" onClick={()=>this.handleCl转载 2020-12-13 22:00:53 · 1108 阅读 · 0 评论 -
recoil error Cannot assign to read only property of object ‘#‘
Cannot assign to read only property of object ‘#’recoil 对象引用值不能修改,可以在atom后添加 dangerouslyAllowMutabilityexport const todoList = atom({ key: 'todoList', default: [ { key: 1, val: 'recoil', }, { key: 2, val: 'react',翻译 2020-10-31 17:31:32 · 499 阅读 · 0 评论 -
react hooks 入门
react hooksHook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。useState 定义状态实例import React, { useState } from 'react'const Demo = () => { let [count, setCount] = useState(0) return <div onClick={_=> setCount(count + 1)}>{原创 2020-08-21 13:41:53 · 237 阅读 · 0 评论 -
react中添加debounce 实现
react中添加debounce 实现handelChange(e) { // 输入框修改的时候执行的方法 e.persist() // react默认会清楚所有的默认属性,所以需要添加这段,保留参数的属性 debounce(()=>{ console.log(e) },500)() }<input ref={ ev=> this.moneyInp...原创 2019-06-27 15:58:50 · 5739 阅读 · 0 评论 -
服务器配置 react/vue 解决页面刷新404 问题
server { listen 80; server_name dd.t.com; root d:/Users/xiaositv/Desktop/2/dist/; location /cgi-bin { proxy_pass http://ddd.com:380/; ...转载 2018-12-14 21:34:11 · 709 阅读 · 0 评论 -
react antd 按需引入
react antd 按需加载实现方式以前有人说按照官方文档实现antd按需引入会有些问题,今天亲自尝试了一下,还是没有问题的,下面时我的具体步骤码云地址 https://gitee.com/qiphon/react-antd-AnXuJiaZai/tree/masterantd 官网配置地址 https://ant-design.gitee.io/docs/react/use-wi...原创 2019-06-02 21:12:07 · 4320 阅读 · 0 评论 -
react阻止默认行为的方法
react阻止默认行为的方法需要设置passive 为falsethis.coverRef.current.addEventListener('touchmove',ev=>ev.preventDefault(),{passive:false})转载 2019-05-28 17:10:03 · 2230 阅读 · 0 评论 -
antd设置语言
antd 设计是按照国际化走的,所以默认是英语的,如果要改成中文的,需要引入内置的组建将项目包裹import zh_CN from 'antd/lib/locale-provider/zh_CN'import { LocaleProvider } from 'antd'ReactDOM.render( <Provider Store={ Store } > ...原创 2019-04-28 10:51:40 · 6989 阅读 · 2 评论 -
create-react-app 搭建 有ReactRouterDom 和 Mobx 项目
create-react-app 搭建 有ReactRouterDom 和 Mobx 项目下载 create-react-appnpm i create-react-app -g创建react 项目create-react-app qiphon-democd qiphon-demo自己修改webpack之类的配置需要执行npm run eject弹出配置文件ya...原创 2019-03-08 16:01:23 · 624 阅读 · 0 评论 -
antd form阻止页面在提交时刷新页面
antd form阻止页面在提交时刷新页面handleSubmit = (e) => { e.preventDefault(); // 这样就好了 this.props.form.validateFields((err, values) => { if (!err) { console.log('Received values of fo...转载 2019-02-27 18:34:41 · 5248 阅读 · 2 评论 -
A component is changing an uncontrolled input of type number to be controlle react报错
react 报错A component is changing an uncontrolled input of type number to be controlleinput 的值如果不存在,请设置成 ‘’ , <input type="number" placeholder="请输入申请金额" value={ this.state.askMoney?this.state.askM...原创 2019-01-18 11:40:32 · 2327 阅读 · 0 评论 -
antd selsect 的 option 选项随页面滚动,或被遮挡解决办法
官方地址(https://ant.design/components/select-cn/)演示地址(https://codesandbox.io/s/4j168r7jw0) 这个地址有点慢<div style={{ padding: 100, height: 1000, background: '#eee', position: 'relative' }} id="area">...转载 2018-12-28 18:50:34 · 5148 阅读 · 0 评论 -
react 中写transform
由于react 中的解析style的问题导致一些复合样式需要一些特殊的写法,第一次接触react,网上没找到正确的方法,还好自己手动测试出来了,复合属性值写法 用【】包裹复合属性,其实就是js类的对象写法上个截图吧,没什么说的,只能说脑子动的太少了...原创 2018-12-28 11:58:15 · 7505 阅读 · 0 评论 -
react中正常敲如HTML代码 vscode
react中正常敲如HTML代码由于我用的是vscode,所以只有vscode的解决方案,代码放这了,设置 – > 首选项 里原创 2018-12-07 13:45:37 · 786 阅读 · 0 评论 -
react笔记
webpack常用loader react react-dom babelify babel-preset-react babel-preset-es2015 webpack webpack-dev-server webpack-cli jsx-loader babel-loader babel-core style-loader css-loader babel-pl...原创 2018-03-09 00:25:06 · 680 阅读 · 0 评论