（草稿）

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

 <!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>

第一步理解这个例子

React学习——ListView组件的更多相关文章

  1. React学习笔记 - 组件&Props

    React Learn Note 4 React学习笔记(四) 标签(空格分隔): React JavaScript 三.组件&Props 组件可以将UI切分成一些独立的.可复用的部件,这样你 ...

  2. React学习——ListView（Reflux）

    接前一篇,把前面的ListView改成Reflux的形式 var BookActions=Reflux.createActions([ 'fetchList' ]); var BookStore = ...

  3. React 学习二 组件

    React的一个最大的特点就是组件化的开发模式.今天就来试一下: <!DOCTYPE html> <html> <head> <meta charset=&q ...

  4. React学习——子组件给父组件传值

    //子组件 var Child = React.createClass({ render: function(){ return ( <div> 请输入邮箱:<input onCha ...

  5. AntDesign(React)学习-15 组件定义、connect、interface

    虽然常用的编码用一种即可,但是看别人文档或者示例时,有的写法不熟悉的话看着很不习惯,整理几种实现同一功能的不同写法 1.Dva Connect与@Connect import React, { Pro ...

  6. AntDesign(React)学习-1 创建环境

    目录: AntDesign(React)学习-15 组件定义.connect.interface AntDesign(React)学习-14 使用UMI提供的antd模板 AntDesign(Reac ...

  7. 【React Native开发】React Native控件之ListView组件解说以及最齐全实例(19)

    ),React Native技术交流4群(458982758).请不要反复加群!欢迎各位大牛,React Native技术爱好者加入交流!同一时候博客左側欢迎微信扫描关注订阅号,移动技术干货,精彩文章 ...

  8. React Native常用组件之ListView组件

    学习iOS开发的同学应该都知道UITableView,几乎每个APP中都有它的存在,而且衍生出各种形态:那么同样,ListView就是在React Native中的tableView,而且更加简单和灵 ...

  9. React Native的组件ListView

    React Native的组件ListView类似于iOS中的UITableView和UICollectionView,也就是说React Native的组件ListView既可以实现UITableV ...

随机推荐

  1. CSS3--transform

    transform:向元素应用2D或3D转换,该属性允许我们对属性旋转,缩放,移动,或倾斜. transfrom:none:定义不进行转换 transfrom:matrix(n,n,n,n,n,n); ...

  2. resolv.conf

    1 这个文件由NetworkManager和network服务共同修改 关闭NetworkManager服务后,修改nameserver和hostname 重启network后,nameserver更 ...

  3. C#获取并写入ORACLE数据库中中英文字符集问题

    背景: 开发语言:C# 开发工具:VS2010 A方ORACLE数据库:中文字符集 B方ORACLE数据库:英文字符集 传递方式:webservice方式(取数据,并把取出的数据放到DataTable ...

  4. ASP.NET MVC为字段设置多语言显示 [转]

    这段时间一直在忙.NET的项目,今天就写一下关于.NET的文章吧,也很长时间没写过.NET的啦  在使用ASP.NET MVC3 的时候,使用元数据模式可以非常方便地设置每个 字段(或者说属性)以减少 ...

  5. sql server 脚本创建数据库和表

    USE [master] GO IF EXISTS(SELECT 1 FROM sysdatabases WHERE NAME=N'HkTemp') BEGIN DROP DATABASE HkTem ...

  6. iOS版本更新的App提交审核流程

    App的版本更新估计是在所难免的了!更新App和新的App发布有何不同了?今天我们一起来看看吧!在发布App的时候我们需要通过开发者帐号——(申请)——>发布证书(需要钥匙串对证书签名也叫加密( ...

  7. 国内技术管理人员批阅google的“春运交通图”项目（大公司下的高效率）<转载>

    在整理一份报告的时候,偶然看到2008年春节期间google推出的“春运交通图”项目建设历程报道,很受启发,随以国内的技术管理人员眼光批阅了这篇文章,同时也是自嘲吧. 以下黑色字体是原报道,红色字体是 ...

  8. Selenium的延迟等待

    http://my.oschina.net/u/928852/blog/98885 Selenium的延迟等待分为 显式等待(Explicit Wait) & 隐式等待(Implicit Wa ...

  9. HDU 1712 分组背包

    ACboy needs your help Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Ot ...

  10. Hollister Outlet Store

    (link to hollisterco site), It's a major try. After a photographer's viewpoint, Which roughly splend ...