render: function () { return ( <li className={React.addons.classSet({ completed: this.props.todo.completed, editing: this.props.editing })}> <div className="view"> <input className="toggle" type="checkbox" checked={this.props.todo.completed} onChange={this.props.onToggle} /> <label onDoubleClick={this.handleEdit}> {this.props.todo.title} </label> <button className="destroy" onClick={this.props.onDestroy} /> </div> <input ref="editField" className="edit" value={this.state.editText} onBlur={this.handleSubmit} onChange={this.handleChange} onKeyDown={this.handleKeyDown} /> </li> ); }

要展示这个View需要依赖其属性与状态：

getInitialState: function () { return {editText: this.props.todo.title}; },

这里没有属性的描写，而他本身也仅仅是标签组件，更多的信息我们需要去看调用方，该组件显示的是body部分，TodoMVC还有footer部分的操作工具条，这里的实现便比较简单了：

1 var app = app || {}; 2 3 (function () { 4 'use strict'; 5 6 app.TodoFooter = React.createClass({ 7 render: function () { 8 var activeTodoWord = app.Utils.pluralize(this.props.count, 'item'); 9 var clearButton = null; (this.props.completedCount > 0) { 12 clearButton = ( 13 <button 14 className="clear-completed" 15 onClick={this.props.onClearCompleted}> 16 Clear completed 17 </button> 18 ); 19 } cx = React.addons.classSet; 23 var nowShowing = this.props.nowShowing; 24 return ( 25 <footer className="footer"> 26 <span className="todo-count"> 27 <strong>{this.props.count}</strong> {activeTodoWord} left 28 </span> 29 <ul className="filters"> 30 <li> 31 <a 32 href="#/" 33 className={cx({selected: nowShowing === app.ALL_TODOS})}> 34 All 35 </a> 36 </li> 37 {' '} 38 <li> 39 <a 40 href="#/active" 41 className={cx({selected: nowShowing === app.ACTIVE_TODOS})}> 42 Active 43 </a> 44 </li> 45 {' '} 46 <li> 47 <a 48 href="#/completed" 49 className={cx({selected: nowShowing === app.COMPLETED_TODOS})}> 50 Completed 51 </a> 52 </li> 53 </ul> 54 {clearButton} 55 </footer> 56 ); 57 } 58 }); 59 })();

我们现在将关注点放在其所有标签的调用方，app.jsx（TodoApp），因为我没看见这个TodoMVC的控制器在哪，也就是我没有看见控制逻辑的js文件在哪，所以控制流程的代码只能在这里了：