新版react踩坑总结
使用es6语法与原本es5语法几个有区别的地方
1.React.creatClass与React.Component
var Component = React.createClass({
render() {
return (
<div></div>
);
}
});
class Component extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<div></div>
);
}
}
2.propType和defaultProps
var Component = React.createClass({
propTypes: {
name: React.PropTypes.string
},
getDefaultProps() {
return { };
},
render() {
return (
<div></div>
);
}
});
class Component extends React.Component { /* static propTypes = { // as static property
title: React.PropTypes.string //需要babel转码 };*/ constructor(props) {
super(props);
} render() {
return (
<h1>{this.props.title}</h1>
);
}
} //静态属性,注意这两个属性都是加到类本身的属性而不是类的实例的属性
Component.propTypes = {
title : React.PropTypes.string.isRequired //被要求是字符串类型,其他类型报错
}; Component.defaultProps = {
title : 'hello world'
};
3.状态区别
var Component = React.createClass({
// return an object
getInitialState(){
return {
isEditing: false
}
}
render(){
return <div></div>
}
})
class Component extends React.Component{
constructor(props){
super(props);
this.state = { // define this.state in constructor
isEditing: false
}
}
render(){
return <div></div>
}
}
4.this区别
var Components = React.createClass({
handleClick() {
console.log(this); // React Component instance
},
render() {
return (
<div onClick={this.handleClick}></div>//会切换到正确的this上下文
);
}
});
class Components extends React.Component {
constructor(props) {
super(props);
this.handleClick = this.handleClick.bind(this);//需要手动处理一下this
}
handleClick() {
console.log(this); // React Component instance
}
render() {
return (
<div onClick={this.handleClick}></div>
);
}
}
5.ReactDOM.findDOMNode
class Component extends React.Component {
componentDidMount() {
let child = ReactDOM.findDOMNode(this.child); //如果ref绑定在组件中则需要调用ReactDOM.findDOMNode()方法来拿取DOM节点
let title = this.title; //如果ref绑定在虚拟DOM中,则可以直接拿到DOM节点
}
render() {
return(
<div>
<ChildComponent ref={(div) => {this.child = div;}} /> //官方文档中建议用回调函数的形式来写ref属性
<h1 ref={(h1) => {this.title = h1;}}>...</h1>
</div>
);
}
}
新版react踩坑总结的更多相关文章
- 【React踩坑记一】React项目中禁用浏览器双击选中文字的功能
常规项目,我们只需要给标签加一个onselectstart事件,return false就可以 例: <div onselectstart="return false;" & ...
- 【React踩坑记五】React项目中引入并使用react-ace代码编辑插件(自定义列表提示)
最近有一个引入sql编辑器插件的需求,要求代码高亮显示,代码智能提示,以及支持自定义代码提示列表等功能.中途在自定义代码提示列表中由于没有相关demo,所以踩了一些坑,遂将其整理如下,以便日后查看. ...
- 航遇项目react踩坑
1.iconfont应用: a.正常用法如下 <span className='iconfont' > iconfont的代码,例如: </span> b.react不能动态 ...
- React 踩坑记录
1.React-router error: super expression must either be null or a function 原因:引入babel后写ES6风格的代码: class ...
- 【React踩坑记四】React项目中引入并使用js-xlsx上传插件(结合antdesign的上传组件)
最近有一个前端上传并解析excel/csv表格数据的需求. 于是在github上找到一个14K star的前端解析插件 github传送门 官方也有,奈何实在太过于浅薄.于是做了以下整理,避免道友们少 ...
- 【React踩坑记三】React项目报错Can't perform a React state update on an unmounted component
意思为:我们不能在组件销毁后设置state,防止出现内存泄漏的情况 分析出现问题的原因: 我这里在组件加载完成的钩子函数里调用了一个EventBus的异步方法,如果监听到异步方法,则会更新state中 ...
- 【React踩坑记二】react项目实现JS路由跳转
这里使用的是4.31版本的react-router-dom "react-router-dom": "^4.3.1", 直接使用以下代码即可实现路由跳转 thi ...
- 【React踩坑记六】create-react-app创建的react项目通过iP地址访问(实现局域网内访问)
同项目组的小伙伴想用自己的电脑访问我电脑上开发阶段的create-react-app创建的react项目. 试过了了各种内网穿透工具ngrok以及localtunnel等. 奈何打开效率实在太过于龟速 ...
- React踩坑笔记 —— React
Webpack提供了自己的导入方式require.include,但同时也支持commonjs规范或AMD规范的require语法,而Node.js使用的就是common.js,ES6的语法Impor ...
随机推荐
- SQL2008 清除日志
USE [master] GO ALTER DATABASE BizTest SET RECOVERY SIMPLE WITH NO_WAIT GO ALTER DATABASE BizTest SE ...
- Linux基础之常用命令(1)
一 linux命令的格式 1.命令 [选项] [参数] ls list 显示目录下内容 ① 命令名称:ls 命令英文原意:list 命令所在路径:/bin/ls 执行权限:所有用户 功能 ...
- [转]windows 短文件名/短路径名规则
How Windows Generates 8.3 File Names from Long File Names Windows generates short file names from lo ...
- eclipse提高效率 MAC
1添加代码提示,在java contentaasist里面加所有字母 2行注释, 块注释mac里是command ctrl加\,鼠标行注释shift+\ 3.快速添加注释doc comman ...
- ASPNET_MVC学习中的疑问
1.在mvc..net4.5.Entity Framewor都提供了多种验证规则. 请问,其中不需要提交到服务器验证的验证,是否是在客户端就完成的,还是说像之前的aspnet一样,都得提交到服务器验 ...
- Calendar获取星期
Calendar的使用举个小栗子: //通过当前时间获取本周周一时间 Date date = new Date(); Calendar calendar = new GregorianCalendar ...
- java简单的二分法排序
二分法排序的思路:数据元素要按顺序排列,对于给定值 x,从序列的中间位置开始比较,如果当前位置值等于 x,则查找成功:若 x 小于当前位置值,则在数列的前半段中查找:若 x 大于当前位置值则在数列的后 ...
- echarts学习网站
echarts : http://echarts.baidu.com/echarts2/doc/example.html 相关脚本学习网站:http://www.jb51.net/html/list/ ...
- ARToolKit for Unity环境搭建(初步搭建成功)
最近一段时间才开始学习使用Unity3d,AR的学习使用中,先后使用了metaio SDK.vuforia SDK,但由于这两个都属于收费的,今天开始尝试使用ARToolKit.先将ARToolKit ...
- 常用linux维护命令
cat /etc/issue 查看linux版本信息