問題出在webpack.config.js內(nèi)容
'use strict';
module.exports = {
entry: [
'webpack/hot/dev-server',
'webpack-dev-server/client?http://localhost:8080',
'./src/components/index/app.js'
],
output: {
path: './build/',
filename: 'bundle.js'
},
externals: {
'react': 'React'
},
module: {
loaders: [
{ test: /\.js$/, loader: 'jsx!babel', include: /src/}
]
}
};
這里的externals:{'react':'React'}會將React賦給交給windows.React.而且給commonJS的require('React')用(注意不是require('react'))。
在代碼里使用import而不是require的話就會在瀏覽器報錯了。(請忽略長長的代碼)
'use strict';
import React from 'react';
import LocalDb from 'localDb';
import TodoHeader from './TodoHeader';
import TodoMain from './TodoMain';
import TodoFooter from './TodoFooter';
/**
* 從上面的渲染（render）方法可以看出，組件的結(jié)構(gòu)分為三部分，就是上中下。
* 上面的TodoHeader是用來輸入任務(wù)的地方，中間的TodoMain是用來展示任務(wù)列表的,
* 下面的TodoFooter提供一些特殊的方法，比如全選、刪除等。
*/
class App extends React.Component{
constructor(){
super();
this.db = new LocalDb('ReactDemo');
//定義組件狀態(tài)
this.state ={
todos:this.db.get('todos') || [],
isAllChecked:false
};
}
// 判斷是否所有任務(wù)的狀態(tài)都完成，同步底部的全選框
allChecked(){
let isAllChecked = false;
if (this.state.todos.every(todo => todo.isDone)){
isAllChecked = true;
}
this.setState({
todos:this.state.todos,
isAllChecked:isAllChecked
});
}
// 添加任務(wù)，是傳遞給Header組件的方法
addTodo(todoItem){
this.state.todos.push(todoItem);
this.db.set('todos',this.state.todos);
this.allChecked();
}
// 刪除當前的任務(wù)，傳遞給TodoItem的方法
deleteTodo(index){
this.state.todos.splice(index,1);
this.setState({todos:this.state.todos});
this.db.set('todos',this.state.todos);
}
// 清除已完成的任務(wù)，傳遞給Footer組件的方法
clearDone(){
let todos = this.state.todos.filter(todo => !todo.isDone);
this.setState({
todos:todos,
isAllChecked:false
});
this.db.set('todos',todos);
}
// 改變?nèi)蝿?wù)狀態(tài)，傳遞給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'));
