随笔分类 - react
摘要：新建一个worker.js文件，编写worker子线程脚本，代码如下： const workercode = () => { self.onmessage = function(e) { console.log('Message received from main script'); var wo
阅读全文
摘要：在react 的事件中使用SyntheticEvent 就会出现下面的报错 <input onChange={async e => { await foo() ... }} /> 那么怎么解决呢？ <input onChange={async e => { e.persist() await foo
阅读全文
摘要：今天在做嵌套路由的时候，没有报错，但是页面显示为空，搜索了一下资料，有两个原因： 1.exact精确匹配 路径为“/”的时候用了exact精确查找，所以不会查找到页面的嵌套路由 2.路由的顺序： 去除了exact之后，无论进哪个页面都是“/”对应的页面，这个时候，只需要把路由的顺序调整一下，把“/”
阅读全文
摘要：antd 3 以前的版本需要在 tsconfig.json 的 compilerOptions 中配置 "allowSyntheticDefaultImports": true
阅读全文
摘要：在taro的jsx中，鉴于编译的机制，官方明确的表示了不能在map循环中使用if循环， 但是呢，官方也给出了解决办法，那就是提取变量或者是用三目运算嵌套的方法： 链接奉上：https://github.com/NervJS/taro/blob/master/packages/eslint-plugi
阅读全文
摘要：在学习react-redux的时候，看到了修饰器这个新的属性，这个是es7的提案属性，很方便。于是我用@connect代替了connect（使用的时候需要配置，这里不赘述），省去了很多不必要的代码，但是我的view层和代码逻辑层是分开的，即view+hoc的模式： 先看封装的connect： 在vi
阅读全文
摘要：把图片文件夹放到public中，然后以这种方式来动态写路径：
阅读全文
摘要：在使用reactjs库的时候，会遇到将一段html的字符串，然后要将它插入页面中以html的形式展现，然而直接插入的话页面显示的就是这段字符串，而不会进行转义，可以用一下方法插入，便可以html的形式展现： 效果如下：
阅读全文
摘要：首先先看一下我的inedx.js入口文件： 这是未点击的时候index默认的是选中状态， 这是我点击其他的路由之后：，明显index路由重复了，仔细看了官方文档之后，发现其实Navlink也应该使用exact进行精确的匹配：
阅读全文
摘要：在一个元素上设置样式，有一个固定的样式，然后还有一个使用三元运算符根据条件添加的样式。 方法一：ES6 模板字符串 `` 方法二：join("") 方法三：classnames(需要下载classnames)
阅读全文
摘要：在单页面里面，父子组件传值是比较常见的，之前一直用vue开发，今天研究了一下react的父子组件传值，和vue差不多的思路，父组件向子组件传值，父通过初始state，子组件通过this.props进行接收就可以了；子组件向父组件传值需要绑定一个事件，然后事件是父组件传递过来的this.props.e
阅读全文
摘要：前端数据大部分来源于后端，需要向后端发起异步请求，而在使用reactjs的时候，如果这个组件最初加载的时候就发起这个异步请求，然后在返回结果中进行setState({})，这时候有可能会遇到这个警告： 通常是因为组件并没有装载上便开始执行setState({})，这时候，我们可以在组件中写入： 然后
阅读全文
摘要：之前用vue-cli脚手架的时候，只需要引进sass需要的依赖包便可以引入scss，但是在create-react-app的时候，发现除了需要引入sass依赖，还需要进行配置： 不管用什么方法进行sass的使用，都要引入sass的相关依赖： 方法一：进行webpack.config的配置，直接在文件
阅读全文
摘要：之前用vue做日程管理组件的时候，用到了点击拖拽的效果，即点击元素，鼠标移动到哪里，元素移动到哪里，鼠标松开，拖拽停止，现在在弄react，于是也在想实现这个效果，经过一番折腾，效果出来了，代码如下： 效果如图，cat猫咪的图片自己找，整体还不错，不会的可以私信我...
阅读全文
摘要：React里面的使用setState来进行状态的更新,为了性能的提升，此时的过程是异步操作的，那我们如果在一个进程里面想同步操作改变了状态的值怎么办呢，这里需要使用回调函数了：
阅读全文
摘要：哎，算了。直接上代码吧，不懂得私聊我把
阅读全文
摘要：今天在学习React的es6语法的时候，发现了个有趣的现象，就是this的指向问题。es6的this不同于es5，它在创立函数伊始便已经存在了，而不是像es5一样，睡调用的函数，this指向谁。但是这也产生了一个令人头疼的问题，当改变状态this.setState的时候，明显会报错，这是this指针
阅读全文
