React学习——ListView（Reflux）-白红宇

React学习——ListView（Reflux）

阅读量：6086 次

发布时间：2019-06-20

本文共 2493 字，大约阅读时间需要 8 分钟。

接前一篇，把前面的ListView改成Reflux的形式

var BookActions=Reflux.createActions([            'fetchList'        ]);    var BookStore = Reflux.createStore({        listenables: [BookActions],         bookList:['item1','item2','item3'],         init:function () {            this.fetchList();            console.log('init done.');        },        fetchList:function(){            this.bookList.push('item'+(this.bookList.length+1));             console.log('fetchList'+this.bookList.length);            this.trigger(this.bookList);        }    });    var TextItem = React.createClass({        render:function(){            var item = this.props.item;            return this is {item}
        }    });    var Template = React.createClass({        render:function(){            return React.createElement(this.props.type,this.props);        }    });    var ListViewItem = React.createClass({          render:function(){            var item = this.props.item;            var cls = this.props.isSelected?'selected':'';            if(this.props.template){                 return 
      
;            }else{                return {item}
;            }         }    });     var ListView = React.createClass({        mixins: [Reflux.connect(BookStore, 'bookstore')],         onSelect:function(item){            this.setState({selectedItem:item});            console.log('selected item:' + item);        },        render: function() {             var itemTemplate = this.props.itemTemplate?this.props.itemTemplate:'';            var selectedItem = this.state.selectedItem;             console.log('state:' + this.state);            for(var key in this.state){                console.log('key='+key);            }            if(this.state.bookstore){                var items = this.state.bookstore?this.state.bookstore:[];                console.log('render items:' +this.state.bookstore + '-' + items.length);                return (                    
     
                          {                        items.map(function (item,i) {                             var isSelected = (item ==selectedItem);                            return 
                              },this)                    }                    
     
                );            }else{                return 
     
;            }        }    });     React.render(        
             
              
                  
                  
     
 ,    document.body    );     BookActions.fetchList();