react踩坑笔记
1、create-react-app中配置webpack
// 方法一:将项目的配置文件抽取到项目中,即运行:
npm run eject // 方法二:使用react-app-rewired
2、create-react-app中src文件夹的别名,当使用了ts时可以在tsconfig.json中配置
"compilerOptions": {
"baseUrl":"src",
"paths":{
"src/*":["./*"],
"components/*":["./components/*"],
"pages/*":["./pages/*"],
"api/*":["./api/*"],
"routes/*":["./routes/*"],
"reducers/*":["./reducers/*"],
"store/*":["./store/*"]
},
},
3、将字符串dom生成为react元素
React.createElement(
'span',
{
dangerouslySetInnerHTML: {__html: '这是一个<b>加粗</b>文本'}
},
)
4、eslint用 npx eslint --init来生成配置,使用pre-commit来实现每次提交前检查,如果如果检测失败则禁止提交
5、要用stylelint 需安装依赖 stylelint stylelint-config-standard stylelint-scss stylelint-config-recess-order
6、请求代理http-proxy-middleware不是直接导出的方法,而是一个对象
7、可以通过路由的reader函数来传递route组件的props
8、用=号给class实例属性赋值,报错Parsing error: Unexpected token =,需要在eslint中添加配置
// 指定eslint解析器
parser: "babel-eslint",
9、使用es时 覆盖webpack配置
// 设置别名
addWebpackAlias({
'@': path.resolve(__dirname, 'src'),
'@axios': path.resolve(__dirname, 'src/api/axios.js'),
}), // 加载scss全局变量
adjustStyleLoaders(rule => {
if (rule.test.toString().includes('scss')) {
rule.use.push({
loader: require.resolve('sass-resources-loader'),
options: {
resources: './src/assets/sass/mixin.scss', // 公共scss变量的路径
}
})
}
})
10、fetch默认不带cookie,如果要带cookie需要显式设置属性{credentials: "include"}
11、在Chrome 85中,有个很重要的变化:将Referrer-Policy默认值从no-referrer-when-downgrade改为strict-origin-when-cross-origin,导致浏览器智能发送同源请求而不能发送异源请求,如果要改变默认行为可以用meta标签 <meta name="referrer" content="no-referrer|no-referrer-when-downgrade|origin|origin-when-crossorigin|unsafe-url">
12、在postman中可以正常请求,在开发环境中请求却报500
app.use(
'/path',
proxy.createProxyMiddleware({
target: 'http://xx.xx.com', // 代理地址
changeOrigin: true, // 服务端限制的话,需要将请求的源地址改为目标地址,不然报500
})
)
13、antd日期组件中月和星期显示问英文,其他显示为中文,解决方法如下
import 'moment/locale/zh-cn'
react踩坑笔记的更多相关文章
- React踩坑笔记 —— React
Webpack提供了自己的导入方式require.include,但同时也支持commonjs规范或AMD规范的require语法,而Node.js使用的就是common.js,ES6的语法Impor ...
- EntityFramework CodeFirst SQLServer转Oracle踩坑笔记
接着在Oracle中使用Entity Framework 6 CodeFirst这篇博文,正在将项目从SQLServer 2012转至Oracle 11g,目前为止遇到的问题在此记录下. SQL Se ...
- CAS5.3服务器搭建与客户端整合SpringBoot以及踩坑笔记
CAS5.3服务器搭建与客户端整合SpringBoot以及踩坑笔记 cas服务器的搭建 导出证书(1和2步骤是找了课程,随便写了一下存记录,不过对于自己测试不投入使用应该不影响) C:\Users\D ...
- ES踩坑笔记
现在开始在业务上使用ES,记录一些踩坑经历,做点笔记. 2018-11-13 source不返回问题 使用了角色校验,客户端插入成功之后获取数据没有source,和查询参数无关. 检查mapping, ...
- react 入坑笔记(四) - React 事件绑定和传参
React 事件处理 建议:在了解 js 的 this 取值后食用更佳. 一.react 与 Html 中用法的异同和注意点 html 中的绑定事件的写法: <button onclick=&q ...
- 微信小程序使用pako.js的踩坑笔记
问题 今天组长跟我们讨论了个问题,说是文章存储占用有点大,消耗宽带流量费,让我看看能不能找个方法解决一下(文章存储的是html字符串).第一反应是没什么头绪,能想到的就是将相同的字符串替换成一个标识之 ...
- Vue3.x+element-plus+ts踩坑笔记
闲聊 前段时间小颖在B站找了个学习vue3+TS的视频,自己尝试着搭建了一些基础代码,在实现功能的过程中遇到了一些问题,为了防止自己遗忘,写个随笔记录一下嘻嘻 项目代码 git地址:vue3.x-ts ...
- 开始更新webpack踩坑笔记
今天开始学习webpack,记录下踩过的坑-zxf
- TypeScript|Angular踩坑笔记
今天按照Angular官网玩了下demo程序,踩了个小坑,记录下. TypeScript可以将变量申明为自定义类型,同时也不对该类型进行检查(不像C#,如果没有这个类型会报错) 比如下面这样: 如果我 ...
随机推荐
- 密码学系列之:blowfish对称密钥分组算法
目录 简介 blowfish详解 密钥数组和S-box 密钥数组 S-box 生成最终的K数组 blowfish blowfish的应用 blowfish的缺点 简介 Blowfish是由Bruce ...
- 『无为则无心』Python基础 — 9、Python字符串的编码与转义
目录 1.查看变量类型 2.转义字符 (1)转义字符说明 (2)示例 (3)常用转义字符对照表 3.字符编码 (1)字符编码介绍 (2)Python中的字符编码 (3)编码格式应用于不同场景 提示:上 ...
- VsCode中代码折叠快捷键
ctrl+K ctrl+[ 折叠本级 ctrl+K ctrl+] 取消折叠本级 ctrl+K ctrl+0 折叠全部 ctrl+K ctrl+J 取消折叠全部
- Netty 框架学习 —— 预置的 ChannelHandler 和编解码器
Netty 为许多提供了许多预置的编解码器和处理器,几乎可以开箱即用,减少了在烦琐事务上话费的时间和精力 空闲的连接和超时 检测空闲连接以及超时对于释放资源来说至关重要,Netty 特地为它提供了几个 ...
- css中的毛玻璃(不是透明度) 简单文档
其实毛玻璃很简单 只需要在css中加入 backdrop-filter:blur(8px); 8px是模糊力度 注意:使用该方法前需要设置背景不能是透明(如果是显示这个元素下面的图像记得半透明,例子就 ...
- 20、checkconfig
chkconfig控制的原理(/etc/init.d/里面设置脚本,在/etc/rc.d/rc..d中设置软连接,通过chkconfig进行管理,同时也加入到了service服务,chkconfig设 ...
- 9、ssh服务详解及优化
ssh是"secure shell protocol"的简写,在进行数据传输之前,ssh先对练级数据包通过加密技术进行加密处理, 加密后再进行数据的传输,从而确保了数据的安全: s ...
- Web自动化之iframe切换
一.如何判断元素是否在iframe中 选中要操作的元素,通过下方的父节点查看是否存在iframe,存在则元素在iframe,需要切换至iframe中进行元素的操作 二.iframe切换方式一 1.方式 ...
- LeSS 的诞生(一):大规模团队该何去何从
<敏捷宣言>发布后,"敏捷"被越来越多的小型开发团队认可.与此同时,另一个问题也逐渐暴露了出来:以 Scrum 为首的敏捷方法论对那些大规模的开发团队并不友好. 基于此 ...
- gRPC 拦截器能做些什么?
什么是拦截器? 拦截器是一种横切维度的功能延展. 具象说明一下,高速收费站就是一种拦截器.它可以做什么?收费,查证,交通控制等等,面向所有穿行过往的车辆. gRPC 拦截器主要分为两种:客户端拦截器( ...