![](https://img-blog.csdnimg.cn/20201014180756738.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
react
混血哲谈
无论身在何处,勿忘佛子本分
展开
-
除非提供了‘--jsx‘标志,否则无法使用JSX
除非提供了‘--jsx‘标志,否则无法使用JSXIslandYoke 2021-03-27 18:49:53 747 收藏分类专栏: Problem 文章标签: reactjs typescript在启动react项目之后,发现语法提示错误信息:“除非提供了’–jsx’标志,否则无法使用JSX”.处理将tsconfig.json配置中的"jsx": "react-jsx"改为react如果发现依然没有效果,那么可能是IDE没有立即读取生效导致的,重启VsCode并重新配置jsx之后,问题..转载 2021-09-23 11:50:28 · 2289 阅读 · 0 评论 -
react 项目自动格式化错误问题
问题:从远程仓库拉了一个项目下来,然后按control+s保存,自动保存格式化的项目竟然变形,导致格式全部变乱了,是怎么回事呢?因为我设置了保存自动格式化代码,在ctrl+s保存的时候,代码就格式化了,格式化后代码格式错乱,如下图在vscode编辑器的右下角,选择javascript问题:每一个文件都要如此操作一次?发现确实是文件名后缀名的问题,react的文件后缀名竟然全部是.js结尾的,也是奇怪了,所以把该改的全部改成jsx或者tsx就可以了。有些文章是这么说的:在用Vscode原创 2021-04-19 12:59:43 · 1273 阅读 · 0 评论 -
如何在项目中使用commitlint?
在windows的vscode上使用始终有问题,不是这里错就是那里错,后面索性用mac,然后就成功了。尴尬,浪费大半天时间。https://commitlint.js.org/#/guides-local-setup这里面的第一步应该是这样的:npm install --save-dev @commitlint/cli @commitlint/config-conventional...原创 2021-03-26 16:38:38 · 444 阅读 · 0 评论 -
npm如何不锁定包,可能会导致不同开发者同步代码后出现问题
拉取了其他同事的代码,然后重新install了之后发觉会报exports is not defined的错误,奇怪的是开发环境有问题,但是测试环境是没有问题的,后来一个同事提醒要锁版本,是啊,用npm不就是会有这个问题么?有时候包是有问题的,所以yarn才那么受欢迎啊,所以才有lock文件啊,下面介绍一下package.json,指定版本号也是一种锁版本的方式: "scripts": { "dev": "webpack-dev-server --inline --progress --confi原创 2020-07-14 11:11:04 · 555 阅读 · 0 评论 -
react Hook如何获取函数子组件的中form表单的值或者组装后的值
需求:需要获取到函数自组件中form表单组装后的数据。解决:如果只是函数子组件中form表单中的数据,这个比较简单,直接传onLoad函数,回传函数子组件的form,然后该调用的时候直接调用即可,但是如果是需要子组件form表单中的数据组装后拿回,那这个就会有点问题,当时的解决方式是通过把子组件改成class类的形式,给子组件加ref,然后通过ref调用子组件中组装数据返回数据的方法实现的,下面提供一种纯粹reactHook获取子组件组装数据的方法。interface Prop{ onLoad:(.原创 2020-05-21 18:17:11 · 5138 阅读 · 0 评论 -
RangePicker 第一个时间置为当天时间的00:00:00,第二个时间为当天时间的23:59:59且在选择范围内才调用
<Spin spinning={searchingloading}> <div className={styles.chooseTimeRange}> <div>创建时间:</div> <RangePicker defaultValue={[timeRange[0...原创 2020-04-20 19:19:09 · 1593 阅读 · 0 评论 -
在 react 中使用 monaco-editor/ react-monaco-editor
http://www.ptbird.cn/react-monaco-editor.html另外代码不高亮的问题参考:解决0.25.1 版本的 react-monaco-editor 代码高亮和代码提示问题及我的另一篇文章。注意:本文章是基于 react-monaco-editor@0.18.0 版本写的,如果使用新版本,比如 0.25.1 代码无法高亮和提示,请参考这篇文章:解决 React...转载 2020-04-11 22:06:47 · 11991 阅读 · 6 评论 -
在 umijs 项目中使用 Monaco Editor 的配置
umi中使用 Monaco Editor,一开始没有代码没颜色,按照react-monaco- editor的官方文档,需要配置文本pack,一开始不知道如何配置,所以做下记录在 umijs 项目中使用 Monaco Editor 的配置安装相关包yarn add monaco-editor、yarn add monaco-editor-webpack-plugin、yarn add rea...转载 2020-04-11 22:00:07 · 2696 阅读 · 1 评论 -
react处理dispatch返回值的方式
如何处理dispatch的返回值,1.要么用then的方式去处理,2.要么用async await的方式。 function comfirmInsertBatCh() { const { err, values } = getParamsBatch(); if (!err) { let params = transForAftereEndB...原创 2020-03-13 14:38:17 · 12386 阅读 · 0 评论 -
antd Select如何中止选中
https://segmentfault.com/q/1010000018556609通过From中的getValueFromEvent可以控制!import React from "react";import ReactDOM from "react-dom";import "antd/dist/antd.css";import "./index.css";import...转载 2020-02-12 19:59:25 · 1710 阅读 · 0 评论 -
antd 的message 在多层嵌套的函数中调用会导致报错么?
message 在函数中调用会导致报错么?// 测试联通性 function testonnectivity(e) { // let a = form.getFieldError('proxyUsername') form.validateFields((err, values) => { if (err) return; ...原创 2020-01-14 22:17:57 · 764 阅读 · 2 评论 -
dva 的model中的effect报错后就不再执行的问题
总结:dva 的model中的effect报错后就不再执行,需要对提前对报错进行处理或者预防报错!// 获取接入参数详细配置 * queryAccessTableVo({ payload }, { race, call, put, take, select }) { console.log('执行了') const res = yi...原创 2020-01-13 11:47:50 · 969 阅读 · 0 评论 -
antd自定义组件在componentWillMount中使用onChange返回组件默认值信息,多次切换其他Select的选项竟然导致报错
antd自定义组件在componentWillMount中使用onChange返回组件默认值信息,多次切换其他Select的选项竟然导致报错!WrappedCheckbox 自定义组件 如下,因为使用了componentWillMountimport React, { Component } from 'react';import { Checkbox } from 'antd';//...原创 2020-01-12 22:17:52 · 714 阅读 · 0 评论 -
antd自定义组件初始值没有返回或者设置initialValue,form.validateFields不会执行验证
在自定义组件中加个componentDidMount返回初始值就可以啦 componentDidMount() { const { onChange } = this.props; onChange({ ...this.state, }); }...原创 2020-01-12 19:10:59 · 2269 阅读 · 0 评论 -
console.log或者alert中的信息是有错的,不会提示而是直接没动静
原创 2020-01-11 18:58:32 · 216 阅读 · 0 评论 -
react报错: 代码中直接使用dispatch报错,dispatch is not a function
如果你像这样使用connect(()=>({},dispatch=>({})))(),在其第二个参数中将dispatch作为参数传了进去,那么你就没办法在代码中直接使用dispatch({type:''.,payload:""})这种形式,不然会报dispatch is not a function,二者貌似只能选一。另外有人貌似是因为这种情况报错!react报错: d...原创 2020-01-02 11:07:58 · 8461 阅读 · 3 评论 -
谈谈axios配置请求头content-type
contentType:告诉服务器,我要发什么类型的数据;对应得Content-Type需要对应得数据格式,这样也是方便后端解析,axios默认是发送json的数据格式。dataType(我只在jq中用过):告诉服务器,我要想什么类型的数据,如果没有指定,那么会自动推断是返回 XML,还是JSON,还是script,还是String。看了下这篇文章也不错,https://www.cnbl...转载 2019-12-22 13:16:01 · 2880 阅读 · 0 评论 -
使用umi脚手架初始化项目的问题
在公司的电脑上,用umi的脚手架启一个新项目,发现也是各种各样的问题,什么yarn create umi不行,好歹行了之后执行yarn安装奇慢,后面换成了npm create umi,然后执行cnpm install 然后能够安装好,执行cnpm run start 能启动项目,没有问题!怎么感觉这个初始化有点包有点不稳定,不知道是哪里的问题哦!有待有时间再研究研究...原创 2019-12-21 18:37:13 · 962 阅读 · 0 评论 -
yarn create umi 报错问题
有个项目会决定使用umi,决定采用umide 脚手架方式,这样能省不少事,虽然不应该被提倡。但是出现线面的问题PS F:\data-train> yarn create umiyarn create v1.21.1[1/4] Resolving packages...[2/4] Fetching packages...error An unexpected error occurr...原创 2019-12-21 17:44:15 · 5060 阅读 · 0 评论 -
用umi脚手架初始化项目提示在此系统禁止运行脚本是为什么?
因为在此系统上禁止运行脚本。今天要初始化一个umi的项目,想使用umi的脚手架,这样感觉会方便点,但是执行yarn create umi或者npm create umi的时候报错,提示此系统上禁止运行脚本,我一开始以为是没有系统管理员权限导致的,找IT服务台开通了这个权限之后发现还是有问题,甚至执行umi -g都有问题,后面找了一下,应该是运行权限问题。解决方案如下:1. 执行:get-E...原创 2019-12-20 16:21:23 · 431 阅读 · 1 评论 -
redux-saga细说
参考:https://blog.csdn.net/sinat_17775997/article/details/103524043https://www.jianshu.com/p/6f96bdaaea22redux-saga 中常见的几种模式(翻译)https://www.jianshu.com/p/c3425f9ef6b7take([...]) 和 race 的比较重要的语境区别是:...原创 2019-12-17 21:18:09 · 231 阅读 · 0 评论 -
用dva记录订单详情状态导致的问题
发现自己其实很多基本问题要么没搞清,要么没有在意,这些迟早都有可能成为一个幺蛾子,给我当头一击。项目中用dva管理了一个状态,类似订单详情展示页面,每次订单详情就可以查看这个订单对应的信息,看起来貌似没有毛病,但是因为我用useEffect(()=>{},[])这样一开始就会去执行请求订单详情的信息,改变dva model中的状态,然后通过connect 相当于监听了这个状态。而useE...原创 2019-12-17 10:09:52 · 224 阅读 · 0 评论 -
antd 设置表格数据超过多少条展示滚动条
antd 设置表格数据超过8条展示滚动条,要滚动条需要制定表格的高度,用逻辑与修饰符可以实现,不用再判断没有8条的时候y的情况。 <Table size="small" loading={tableLoading} scroll={{ x: tColumn.reduce(...原创 2019-12-16 15:00:33 · 4700 阅读 · 0 评论 -
useCallback包裹函数,但是使用到的外部变量一直是最开始的值
这篇文章不错 https://www.cnblogs.com/ascoders/p/10591832.html一开始用useCallback包裹了这个函数,这个函数的handleAction中有用到一个paramsMemo的数据,这个数据是声明在外面的。这样有个问题是handleAction中拿到的paramsMemo一直是最开始的数据。所以疑问是 useCallback中会拿不到外面变量...原创 2019-12-13 20:45:06 · 2410 阅读 · 1 评论 -
checkGroup 有全选框的时候 的indeterminate的作用
checkGroup 有全选框的时候,其子项的选择不会使全选中的状态发生改变,除非是全部选中,通过indeterminate进行的控制。举例如下: onChange = (checkedList: any) => { const { onChange } = this.props as any; if (!('value' in this.props)) ...原创 2019-12-13 16:42:55 · 1073 阅读 · 0 评论 -
渲染多组相同组件谨防组件key值为undefined导致的报错
渲染多组相同组件谨防组件key值为undefined导致的报错!一开始报错没有unique key,后面发现是这个key为undefined导致的,就相当于是没有设置key,要防止这种情况,后面随便加个什么就好了。<div className={`${styles.proposer} ${styles.applyLine}`}> <span classNam...原创 2019-12-13 16:05:13 · 476 阅读 · 0 评论 -
多个model的情况下在connect中解构state
多个model的情况下在connect中解构state,这种本来没有稀奇,但还是写下博客。export default Form.create<any>()( connect( // mapStateToProps, // 这里不加这个ConnectState的类型,这个global就会报错没有. ({ global: { currentUser } }:...原创 2019-12-13 15:11:46 · 1074 阅读 · 0 评论 -
react 组件中新增属性可以用...解构对象直接放进去
以前知道react 组件中新增属性可以用…解构对象直接放进去,但是这样加判断进去也是第一次用 <Button type="link" {...{ "disabled": row.lineStatus == 2 ? true : false }} onClick={() => row.lineStatus == 2 ? false : handlerAction(row, 'ed...原创 2019-12-13 11:47:21 · 931 阅读 · 0 评论 -
antd自定义组件传值,老是报错Objects are not valid as a React child
antd自定义组件传值,老是报错Objects are not valid as a React child ,发现原来antd自定义组件的默认值是string类型,需要单独再指定他的返回值的类型。比如我的自定义组件返回的是数组类型 <FormItem label="技术负责人"> {getFieldDecorator('dat...原创 2019-12-12 21:07:04 · 1099 阅读 · 0 评论 -
ant-design自定义表单组件回传值的问题
getFieldDecorator这个方法会向组件注入value参数,onChange方法。子组件通过value参数来初始化值,通过onChange方法通知父组件更新。如果想传入其他参数,也可以像placeholder那样显示的传入。官方定义:自定义或第三方的表单控件,也可以与 Form 组件一起使用。只要该组件遵循以下的约定: 提供受控属性value或其它与valuePr...原创 2019-12-12 21:03:31 · 2780 阅读 · 0 评论 -
受控组件和不受控组件的区别
受控组件:即通过setState的形式控制输入的值及更新,非受控组件:即通过dom的形式更新值,要获取其值可以通过ref的形式去获取。受控组件在HTML中,标签<input>、<textarea>、<select>的值的改变通常是根据用户输入进行更新。在React中,可变状态通常保存在组件的状态属性中,并且只能使用setState()更新,...原创 2019-12-12 20:47:01 · 3107 阅读 · 0 评论 -
使用 try catch 防止页面报错而卡死
try{//执行的代码,其中可能有异常。一旦发现异常,则立即跳到catch执行。否则不会执行catch里面的内容}catch{//除非try里面执行代码发生了异常,否则这里的代码不会执行}finally{//不管什么情况都会执行,包括try catch 里面用了return ,可以理解为只要执行了try或者catch,就一定会执行 finally...原创 2019-12-12 16:44:19 · 1245 阅读 · 0 评论 -
解决antd的Form组件setFieldsValue的警告
记住:setFieldsValue的字段要对应得上解决antd的Form组件setFieldsValue的警告使用antd的Form组件setFieldsValue可能会出现You cannot set a form field before rendering a field associated with the value.警告,字面意义去看是说在 render之前设置...转载 2019-12-11 17:06:44 · 19114 阅读 · 0 评论 -
结合高阶函数聊聊useMemo和useCallback
**使用useMemo可以实现useCallbackuseCallback(fn, deps)其实相当于useMemo(() => fn, deps),所以说:使用useMemo完全可以实现useCallback。useCallbackfunction Example() { // ... 省略其他代码 // 相比之前的 Example 组件,我们只是增加了 use...转载 2019-12-10 21:43:59 · 1160 阅读 · 0 评论 -
看完这篇,你也能把 React Hooks 玩出花
https://juejin.im/post/5d754dbde51d4561cd2466bf这篇文章中有些案例还是不错,在自定义hook这里写得很好 useMemo 返回值可为数字,可为组件; useCallback 用着对useEffect中相同逻辑的封装,配合Effect使用;useMemo 返回值可为数字,可为组件返回值是数字import React...转载 2019-12-09 23:42:57 · 189 阅读 · 0 评论 -
React.memo可以传第二个参数来实现props的深度比较
使用 React.memoReact.memo是 React 16.6 新的一个 API,用来缓存组件的渲染,避免不必要的更新,其实也是一个高阶组件,与PureComponent十分类似,但不同的是,React.memo只能用于函数组件 。基本用法import { memo } from 'react';function Button(props) { // Com...原创 2019-12-09 23:13:04 · 7809 阅读 · 0 评论 -
自定义validator callback逻辑没有写完,会导致form.validateFields (()=>{})根本就不会执行
<FormItem label="可申请范围"> {getFieldDecorator('canApplyScope', { // valuePropName: "checked", initialValue: undefi...原创 2019-12-09 20:49:32 · 3478 阅读 · 0 评论 -
withRouter的作用和一个简单应用
作用:把不是通过路由切换过来的组件中,将react-router 的 history、location、match 三个对象传入props对象上。比如首页!默认情况下必须是经过路由匹配渲染的组件才存在this.props,才拥有路由参数,才能使用编程式导航的写法,执行this.props.history.push('/detail')跳转到对应路由的页面然而不是所有组件都直接与...转载 2019-12-05 11:49:39 · 405 阅读 · 0 评论 -
react 的高级用法
>>>context,hoc,render,createPortal,>>>1.Context(上下文)在某些场景下,你想在整个组件树中传递数据,但却不想手动地在每一层传递属性。你可以直接在 React 中使用强大的contextAPI解决上述问题 在一个典型的 React 应用中,数据是通过 props 属性自上而下(由父及子)进行传递的,但...转载 2019-12-04 23:07:36 · 700 阅读 · 0 评论 -
[译] 使用 Render props 吧!
https://juejin.im/post/5a3087746fb9a0450c4963a5render prop 是一个用于告知组件需要渲染什么内容的函数 prop这也是逻辑复用的一种方式在这篇文章看来该技术规避了所有 mixin 和 HOC 会面对的问题:ES6 class。不成问题,我们可以在 ES6 class 创建的组件中使用 render prop。不够直接。我们不...原创 2019-12-04 22:51:46 · 98 阅读 · 0 评论