React学习——ListView组件

（草稿）

先把代码放上来，再补充说明

 <!DOCTYPE html>
 <html>
 <head>
     <title>React ListView</title>
     <!--
     做一个列表控件，列表元素的模板可以设置，模仿ItemTemplate
     -->
     <script src="../build/react-with-addons.js" type="text/javascript"></script>
     <script src="../build/JSXTransformer.js" type="text/javascript"></script>
     <style type="text/css">
     .selected{
         color: red;
     }
     </style>
 </head>
 <body>

 <script type="text/jsx">

     var TextItem = React.createClass({
         render:function(){
             var item = this.props.item;
             return <p>this is {item}</p>
         }
     });

     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 <li className={cls} onClick={this.props.onClick}><Template type={this.props.template} item={item}></Template></li>;
             }else{
                 return <li className={cls} onClick={this.props.onClick}>{item}</li>;
             }
         }
     }); 

     var ListView = React.createClass({
         getInitialState: function() {
           return {selectedItem: ''};
         },
         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;
             return (
                 <ol>
                 {
                     this.props.items.map(function (item,i) {
                         var isSelected = (item ==selectedItem);
                           return <ListViewItem key={i} item={item} template={itemTemplate} isSelected={isSelected} onClick={this.onSelect.bind(this,item)}></ListViewItem>
                     },this)
                 }
                 </ol>
             );
         }
     }); 

     var items=['item1','item2','item3'];
     React.render(
         <ListView items={items} itemTemplate={TextItem}>
         </ListView>,
         document.body
     );
 </script>
 </body>
 </html>

第一步理解这个例子