Webpack, VSCode 和 Babel 组件模块导入别名

很多时候我们使用别人的库,都是通过 npm install,再简单的引入,就可以使用了。 [crayon-5bef519cb93a0750676122/] 那如果我们自己写的组件库和工具 utils 类怎么办?如果你不熟悉别名的概念,通常会引入相对路径,它会变成这样。 [crayon-5bef519…

React Native 项目 debug 模式调试安卓真机白屏

因为 iPhone 和 安卓在界面显示有些不同(比如 overflow 的问题),开发和测试中需要在 iPhone 和安卓上都跑一下。 在我的魅族 MX5 和 红米 Note 3 跑 debug 版的时候发现一直白屏,显示不了内容。按道理说就算是出现了问题,也应该出现的是红的背景下的react na…

React Native <View> 标签不能直接内嵌字符串文本

公司的 React Native 项目当时为了快速开发,使用的是之前的比较老的 React Native 项目做得架子。没有装 Eslint。稍微不忙的时候,我安装配置了 Eslint,打算新的界面文件使用比较标准的规范编写,陆续把以前写的文件也修改规范。 在格式化规范某个文件的代码的时候,基于 A…

React/React Native 的 ES5 ES6 写法对照表

很多 React/React Native 的初学者都被 ES6 的问题迷惑:各路大神都建议我们直接学习 ES6 的语法 (class Foo extends React.Component),然而网上搜到的很多教程和例子都是 ES5 版本的,所以很多人在学习的时候连照猫画虎都不知道怎么做。今天在此…

React 实践心得:key 属性的原理和用法

转自:http://taobaofed.org/blog/2016/08/24/react-key/ 我们知道,React 元素可以具有一个特殊的属性 key,这个属性不是给用户自己用的,而是给 React 自己用的。如果我们动态地创建 React 元素,而且 React 元素内包含数量或顺序不确定…

数组和对象判断是否为空

判断一个数组是否为空 注意:判断数组 array 是否为空数组,即 [],需要用 array.length === 0 判断,不能直接比较 [] 。因为[] !== [] 为 true js 中的数据类型 字符串、数字、布尔、数组、对象、Null、Undefined === 全等比较比较 …

让 React 正常显示你的 html 代码: dangerouslySetInnerHTML

做项目需要把服务器接口传过来的 HTML 文本字符串转换成 DOM 对象。 有两种方法: 第一种用 innerHTML; [crayon-5bef519cbacd8974019288/] 现在主要说的是第二种: 多数时候 DOM 是透过 render 中设定的结构来处理,有些时候我们想透过字串形式的…

Ant-design Button onClick 获取按钮的目标

用 React 的 Ant-Design 发现的 Button 获取 onClick 的 e.target 的时候经常会出问题,发现 Antd 封装的 Button 是一个 button 里面还有 span,如果点击的是按钮上的文字的话,获取的是 span,这个时候 e.target 是不起作用的。…

防止用户在编辑界面意外退出

在做一个 React 项目的时候,有一个编辑富文本界面,用户可以写文章。写文章的时候,怕关闭没有保存,可以有两种做法:一种是做出自动保存;用户就算关闭,第二次打开数据还在;第二种是页面被关闭或者刷新,弹出对话框提醒用户保存。接下来说的是第二种方式的做法。 分别在 componentDidM…