Uncaught TypeError: _react2.defa
2016-12-11 本文已影响1440人
一书and一世界
在浏览器上报错
Uncaught TypeError: _react2.default.render is not a function
原因
React版本过高,不支持React.render()方法。
'use strict';
import React from 'react';
import ReactDOM from 'react-dom';
import LocalDb from 'localDb';
import TodoHeader from './TodoHeader';
import TodoMain from './TodoMain';
import TodoFooter from './TodoFooter';
/**
* 从上面的渲染(render)方法可以看出,组件的结构分为三部分,就是上中下。
* 上面的TodoHeader是用来输入任务的地方,中间的TodoMain是用来展示任务列表的,
* 下面的TodoFooter提供一些特殊的方法,比如全选、删除等。
*/
class App extends React.Component{
constructor(){
super();
this.db = new LocalDb('ReactDemo');
//定义组件状态
this.state ={
todos:this.db.get('todos') || [],
isAllChecked:false
};
}
// 判断是否所有任务的状态都完成,同步底部的全选框
allChecked(){
let isAllChecked = false;
if (this.state.todos.every(todo => todo.isDone)){
isAllChecked = true;
}
this.setState({
todos:this.state.todos,
isAllChecked:isAllChecked
});
}
// 添加任务,是传递给Header组件的方法
addTodo(todoItem){
this.state.todos.push(todoItem);
this.db.set('todos',this.state.todos);
this.allChecked();
}
// 删除当前的任务,传递给TodoItem的方法
deleteTodo(index){
this.state.todos.splice(index,1);
this.setState({todos:this.state.todos});
this.db.set('todos',this.state.todos);
}
// 清除已完成的任务,传递给Footer组件的方法
clearDone(){
let todos = this.state.todos.filter(todo => !todo.isDone);
this.setState({
todos:todos,
isAllChecked:false
});
this.db.set('todos',todos);
}
// 改变任务状态,传递给TodoItem和Footer组件的方法
changeTodoState(index,isDone,isChangeAll=false){
if(isChangeAll){
this.setState({
todos:this.state.todos.map( (todo) => {
todo.isDone = isDone;
return todo;
}),
isAllChecked:isDone
});
}else{
this.state.todos[index].isDone = isDone;
this.allChecked();
}
this.db.set('todos',this.state.todos);
}
//组件渲染方法
render(){
let info = {
isAllChecked:this.state.isAllChecked,
todoCount:this.state.todos.length || 0,
todoDoneCount:(this.state.todos && this.state.todos.filter((todo)=>todo.isDone)).length || 0
};
return (
<div className="todo-wrap">
<TodoHeader addTodo={this.addTodo.bind(this)} />
<TodoMain todos={this.state.todos} deleteTodo={this.deleteTodo.bind(this)} changeTodoState={this.changeTodoState.bind(this)} />
<TodoFooter {...info} changeTodoState={this.changeTodoState.bind(this)} clearDone={this.clearDone.bind(this)} />
</div>
);
}
}
React.render(<App/>,document.getElementById('app')); //这句的问题
解决方法
- 降低React版本(不推荐)
- 将最后一句
React.render(<App/>,document.getElementById('app'));
改成
ReactDOM.render(<App/>,document.getElementById('app'));
(如果没有引入react-dom是会报找不到ReactDOM方法的)
其实有关DOM操作的时候,都需要用ReactDOM来代替React。
这里也会报同样的错误
React.findDOMNode(this).style.background = '#eee';
改成这样就好了
ReactDOM.findDOMNode(this).style.background = '#eee';