【React踩坑记四】React项目中引入并使用js-xlsx上传插件(结合antdesign的上传组件)

【【React踩坑记四】React项目中引入并使用js-xlsx上传插件(结合antdesign的上传组件)】的更多相关文章

【React踩坑记四】React项目中引入并使用js-xlsx上传插件(结合antdesign的上传组件)

最近有一个前端上传并解析excel/csv表格数据的需求. 于是在github上找到一个14K star的前端解析插件 github传送门官方也有,奈何实在太过于浅薄.于是做了以下整理,避免道友们少走一些弯路. 安装依赖 yarn add xlsx //或 npm install xlsx 项目中引入 import * as XLSX from 'xlsx'; 上传组件(antdesign的上传组件) <Dragger name="file" accept={this.stat…

【React踩坑记五】React项目中引入并使用react-ace代码编辑插件(自定义列表提示)

最近有一个引入sql编辑器插件的需求,要求代码高亮显示,代码智能提示,以及支持自定义代码提示列表等功能.中途在自定义代码提示列表中由于没有相关demo,所以踩了一些坑,遂将其整理如下,以便日后查看. 1.安装 yarn add react-ace //或 npm install react-ace 2.在项目中引入 import AceEditor from 'react-ace'; 3.在组件中使用 <AceEditor ref="editor" mode="mysq…

Hook踩坑记：React Hook react-unity-webgl

自公司前后分离上手React以来,一个坑一个坑的踩,Class的全生命周期云里雾里,还么屡明白,就抱上了Hook的大腿不松手,确实爽到飞起.修改到Hook的过程基本比较顺畅,直接少了三分之一的代码,组件更容易封装,调试更方便,诸多优点在此不再赘述,已有各路大佬纷纷评价,此处贴上中文官方地址:React-Hook文档.这里主要讲讲修改到一块关于 Unity 3D模型加载的踩坑记. 背景:React 加载 Unity 3D模型 ,使用到一个插件 react-unity-webgl,感兴趣的盆友可以自…

vue踩坑记，持续更新中......

1.运行项目报错 you may use special comments to disable some waring. use //eslint-disable-next-line.....吧啦吧啦解决办法: 找到webpack.base.conf.js,注释掉下面一段 const createLintingRule = () => ({ // test: /\.(js|vue)$/, // loader: 'eslint-loader', // enforce: 'pre', // in…

【React踩坑记一】React项目中禁用浏览器双击选中文字的功能

常规项目,我们只需要给标签加一个onselectstart事件,return false就可以例: <div onselectstart="return false;" ></div> 但是在React中,是没有onselectstart事件的我们只需要给标签添加个样式就可以了. .node{/*node为标签的class名*/ -webkit-user-select: none; -moz-user-select:none; -o-user-select:…

【React踩坑记六】create-react-app创建的react项目通过iP地址访问(实现局域网内访问)

同项目组的小伙伴想用自己的电脑访问我电脑上开发阶段的create-react-app创建的react项目. 试过了了各种内网穿透工具ngrok以及localtunnel等. 奈何打开效率实在太过于龟速. 于是不得不百度 react项目如何开启内网访问结果找了说是要配置webpack. 好吧,配就配... 可是对于还没有eject的项目来说,webpack配置没暴露出来,没法配啊. 果断npm run eject. eject后报了一大堆错.掰着指头数下来有5,6,7,8个~ 直接npm sta…

【React踩坑记三】React项目报错Can't perform a React state update on an unmounted component

意思为:我们不能在组件销毁后设置state,防止出现内存泄漏的情况分析出现问题的原因: 我这里在组件加载完成的钩子函数里调用了一个EventBus的异步方法,如果监听到异步方法,则会更新state中isShowNav的值. 解决方法我们应该在组件销毁的时候将异步方法撤销 this.setState = (state, callback) => { return; };…

【React踩坑记二】react项目实现JS路由跳转

这里使用的是4.31版本的react-router-dom "react-router-dom": "^4.3.1", 直接使用以下代码即可实现路由跳转 this.props.history.push("/dashboard/add")…

【React踩坑记三】React项目报错Can't perform a React state update on an unmounted component

意思为:我们不能在组件销毁后设置state,防止出现内存泄漏的情况分析出现问题的原因: 我这里在组件加载完成的钩子函数里调用了一个EventBus的异步方法,如果监听到异步方法,则会更新state中isShowNav的值. 解决方法我们应该在组件销毁的时候将异步方法撤销 this.setState = (state, callback) => { return; }; 这里有324.57GB的修仙资料.嘿嘿嘿你懂得./手动狗头扫二维码加为好友就完事了!安排~…

React踩坑记

一: Support for the experimental syntax 'classProperties' isn't currently enabled ERROR in ./src/index.js Module build failed (from ./node_modules/_babel-loader@8.0.5@babel-loader/lib/index.js): SyntaxError: F:\Front-end items\vs code\react-2\src\inde…

react 踩坑记

yarn node-sass 安装失败 yarn config set sass-binary-site http://npm.taobao.org/mirrors/node-sass yarn insall create-react-app 创建项目后,安装插件,yarn start 报错:'react-scripts' 不是内部或外部命令,也不是可运行的程序或批处理文件. 是create-react-app有丢包的缺陷,手动安装包后,需要重新npm install一下,这样node_mod…

踩坑---vue-cli搭建的项目中localhost不能访问

只需要在config文件夹里面的index.js文件里面的module.exports下面的dev中的 host:'localhost' 改为 host:'0.0.0.0' ,然后重启服务器…

vue项目中引入mui.poppicker.js文件时报错“Uncaught ReferenceError: mui is not defined”

解决:在mui.js的源文件后最后加上 window.mui = mui;…

WinUI 3 踩坑记：从创建项目到发布

本文是 WinUI 3 踩坑记的一部分,该系列发布于 GitHub@Scighost/WinUI3Keng,若内容出现冲突以 GitHub 上的为准. 创建项目现在 WinUI 3 的入门体验比刚发布那会儿好太多了,至少不会再出现模板项目无法生成的情况 [1].打开 Visual Studio 创建 WinUI 3 项目,有如下的三个模板可以选择: 第一个模板的 WinUI 3 项目和打包项目是同一个项目,第三个模板的则是两个不同的项目.如果在发布时需要让多个可执行文件存在于不同文件夹,就选…

react项目中引入了redux后js控制路由跳转方案

如果你的项目中并没有用到redux,那本文你可以忽略问题引入纯粹的单页面react应用中,通过this.props.history.push('/list')就可以进行路由跳转,但是加上了redux后,使用这个语句并不能生效.相信你在做的过程也遇到了此问题,控制台报错了-_- 1 Uncaught TypeError: Cannot read property 'push' of undefined 解决方案在将要使用js控制路由的组件中引入withRouter方法; 大专栏 react…

Vue + TypeScript + Element 搭建简洁时尚的博客网站及踩坑记

前言本文讲解如何在 Vue 项目中使用 TypeScript 来搭建并开发项目,并在此过程中踩过的坑 . TypeScript 具有类型系统,且是 JavaScript 的超集,TypeScript 在 2018年势头迅猛,可谓遍地开花. Vue3.0 将使用 TS 重写,重写后的 Vue3.0 将更好的支持 TS.2019 年 TypeScript 将会更加普及,能够熟练掌握 TS,并使用 TS 开发过项目,将更加成为前端开发者的优势. 所以笔者就当然也要学这个必备技能,就以边学边实践…

【踩坑记】从HybridApp到ReactNative

前言随着移动互联网的兴起,Webapp开始大行其道.大概在15年下半年的时候我接触到了HybridApp.因为当时还没毕业嘛,所以并不清楚自己未来的方向,所以就投入了HybridApp的怀抱. HybridApp最早好像是国外的PhoneGap,然后国内有AppCan.Dcloud.APICloud等等.我当时接触的是APICloud,相比于其他平台,APICloud最大的特点是它的混合程度比较高! 要知道,Webapp最大的问题就是性能问题始终无法和原生App相比,由此才发展出来Hybrid…

Spark踩坑记——Spark Streaming+Kafka

[TOC] 前言在WeTest舆情项目中,需要对每天千万级的游戏评论信息进行词频统计,在生产者一端,我们将数据按照每天的拉取时间存入了Kafka当中,而在消费者一端,我们利用了spark streaming从kafka中不断拉取数据进行词频统计.本文首先对spark streaming嵌入kafka的方式进行归纳总结,之后简单阐述Spark streaming+kafka在舆情项目中的应用,最后将自己在Spark Streaming+kafka的实际优化中的一些经验进行归纳总结.(如有任何纰漏…

Spark踩坑记——共享变量

[TOC] 前言 Spark踩坑记--初试 Spark踩坑记--数据库(Hbase+Mysql) Spark踩坑记--Spark Streaming+kafka应用及调优在前面总结的几篇spark踩坑博文中,我总结了自己在使用spark过程当中踩过的一些坑和经验.我们知道Spark是多机器集群部署的,分为Driver/Master/Worker,Master负责资源调度,Worker是不同的运算节点,由Master统一调度,而Driver是我们提交Spark程序的节点,并且所有的reduce类…

Spark踩坑记——从RDD看集群调度

[TOC] 前言在Spark的使用中,性能的调优配置过程中,查阅了很多资料,之前自己总结过两篇小博文Spark踩坑记--初试和Spark踩坑记--数据库(Hbase+Mysql),第一篇概况的归纳了自己对spark的初步尝试,第二篇更多是局部在spark对于数据库的操作,而本文的思路是从spark最细节的本质,即核心的数据结构RDD出发,到整个Spark集群宏观的调度过程做一个整理归纳,从微观到宏观两方面总结,方便自己在调优过程中找寻问题,理清思路,也加深自己对于分布式程序开发的理解.(有任何…

djangorestframework+vue-cli+axios，为axios添加token作为headers踩坑记

情况是这样的,项目用的restful规范,后端用的django+djangorestframework,前端用的vue-cli框架+webpack,前端与后端交互用的axios,然后再用户登录之后,axios添加token作为axios的header并请求后端,后端部分用的djangorestframework的认证组件. 以上的相关知识,不是本篇文章的重点,请移步: 前后端分离djangorestframework——认证组件 vue(9)—— 组件化开发 - webpack(3) vue(6…

HttpWebRequest 改为 HttpClient 踩坑记-请求头设置

HttpWebRequest 改为 HttpClient 踩坑记-请求头设置 Intro 这两天改了一个项目,原来的项目是.net framework 项目,里面处理 HTTP 请求使用的是 WebReauest,但是 WebRequest 已经不再推荐使用了,你如果在项目中使用的话,编译器会警告, WebRequest已过时,新项目要 .Net standard 重写就直接 HttpClient 来处理 HTTP 请求了,在改的过程中踩了几个坑,记录一下请求头处理 HttpClient 通常…

Spring @Transactional踩坑记

@Transactional踩坑记总述 Spring在1.2引入@Transactional注解, 该注解的引入使得我们可以简单地通过在方法或者类上添加@Transactional注解,实现事务控制. 然而看起来越是简单的东西,背后的实现可能存在很多默认规则和限制.而对于使用者如果只知道使用该注解,而不去考虑背后的限制,就可能事与愿违,到时候线上出了问题可能根本都找不出啥原因. 踩坑记 1. 多数据源事务不生效背景介绍由于数据量比较大,项目的初始设计是分库分表的.于是在配置文件中…

Spark踩坑记：Spark Streaming+kafka应用及调优

前言在WeTest舆情项目中,需要对每天千万级的游戏评论信息进行词频统计,在生产者一端,我们将数据按照每天的拉取时间存入了Kafka当中,而在消费者一端,我们利用了spark streaming从kafka中不断拉取数据进行词频统计. 本文首先对spark streaming嵌入kafka的方式进行归纳总结,之后简单阐述Spark streaming+kafka 在舆情项目中的应用,最后将自己在Spark Streaming+kafka 的实际优化中的一些经验进行归纳总结.(如有任何纰漏欢迎补…

windows container 踩坑记

windows container 踩坑记 Intro 我们有一些服务是 dotnet framework 的,不能直接跑在 docker linux container 下面,最近一直在折腾把它部署在 windows container 下,折腾的有点恶心,记录一下. Windows Container 介绍 Windows Container 是微软在 Windows 上的虚拟化实践,它可以提供操作系统级别的虚拟化. 通过我们说的容器化大多是指 Linux Container,基于 linu…