react_I 一个导航条-优快云博客

本文介绍了一个基于React实现的导航组件，通过配置项自动生成导航条，并绑定了不同的操作行为，如新建、打开、保存等。文章展示了如何使用Reflux进行状态管理及lodash库的引入。

 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;