react_I 一个导航条
1 'use strict'; 2 3 var React = require('react'); 4 var Reflux = require('reflux'); 5 var _ = require('lodash'); 6 7 var actions = require('../actions'); 8 9 var Nav_config =[ 10 { 11 name : '保存' , 12 bindTo : 'save' 13 }, 14 { 15 name : '新建' , 16 bindTo : 'create' 17 }, 18 { 19 name : '打开' , 20 bindTo : 'open' 21 }, 22 { 23 name : '撤销', 24 bindTo : '' 25 }, 26 { 27 name :'恢复' , 28 bindTo : '' 29 } 30 ]; 31 32 let YzNav = React.createClass({ 33 handleClick : function(){ 34 console.log(1); 35 switch (this.props.bindTo) { 36 case 'create': 37 actions.create({header: 'header'}); 38 break; 39 case 'open': 40 actions.project.open({header: 'header'}); 41 break; 42 case 'save': 43 actions.save({header: 'header'}); 44 break; 45 case 'close': 46 actions.close({header: 'header'}); 47 break; 48 case 'close-solution': 49 actions.closeSolution({header: 'header'}); 50 default: 51 break; 52 } 53 }, 54 render:function(){ 55 return ( 56 <a onClick={this.handleClick}>{this.props.name}</a> 57 ); 58 } 59 }); 60 61 let YzNavs = React.createClass({ 62 63 render: function () { 64 let Navs = []; 65 Nav_config.forEach(function (tool, key) { 66 Navs[key] = <YzNav name={tool.name} bindTo={tool.bindTo} key={key} /> 67 }); 68 return ( 69 <div className="fix"> 70 <nav> 71 {Navs} 72 </nav> 73 </div> 74 ); 75 } 76 }); 77 78 let YzTest = React.createClass({ 79 render: function () { 80 return ( 81 <div className='fix'> 82 <b>Yz_Test</b> 83 <YzNavs /> 84 </div> 85 ); 86 } 87 }); 88 89 module.exports = YzTest;