（草稿）

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

 <!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. PHP加速处理插件 Zend Optimizer，Zend Guard Loader 和 Zend Opcache 区别

    PHP 5.3.X   以前版本 为  Zend Optimizer PHP 5.3.X   之后 更名为  Zend Guard Loader 可以帮助php执行加密后的php代码 安装实例以Ubu ...

  2. JavaWeb前端：JQuery

    Jquery基本概念 什么是Jquery Jquery是一个开源的,集成了Javascript,CSS,DOM,AJAX的前端框架:它诞生于2006年,最初是为了简化JavaScript开发而产生的, ...

  3. Windows添加和取消右键管理员权限

    亲测可用 新建文本文档,粘贴下列代码 Windows Registry Editor Version 5.00[HKEY_CLASSES_ROOT\*\shell\runas]@="管理员取 ...

  4. guava学习--FutureFallback

    FutureFallback提供一个Future的备用来替代之前失败的Future,常被用来作为Future的备份或者默认的值. @Testpublic void testFuturesFallbac ...

  5. TypeError: window.open is not a function

    想必大家现在都已经到家了,而苦逼的我还要坐在办公室混拿微薄的工资,技不如人,平常不努力给自己充电,年终一毛钱都没多给.不说这扫兴的话题了,在这给同样在苦逼坚守岗位的同志们节日的问候,新的一年,好运连连 ...

  6. linux之PATH环境变量

    在linux中,我们发现一些命令在任何目录都能执行,并不会出现找不到这个命令文件的提示,这其中就是PATH变量帮我们定位的!首先我们来查看一下PATH变量 [root@localhost /]# ec ...

  7. JS基础（超级简单）

    1     JS基础(超级简单) 1.1 数据类型 1.1.1   基本类型: 1)        Number:特别注意:NaN的检测方法:Nan!=NaN;或者使用isNaN方法 2)       ...

  8. Flapper Bird的学习笔记（一）

    因为我有一个超屌的梦想,所以就绝不做孬种的追梦人! 本文主要目的是为了实现Flapper Bird的功能. 另外一个目的是为了加强对Unity引擎的理解和掌握. 新人一枚,如若看到是我幸运.若是发现错 ...

  9. hadoop运行原理之Job运行(四) JobTracker端心跳机制分析

    接着上篇来说,TaskTracker端的transmitHeartBeat()方法通过RPC调用JobTracker端的heartbeat()方法来接收心跳并返回心跳应答.还是先看看这张图,对它的大概 ...

  10. linux操作命令

    cd / 回到跟目录 cd ..  返回上一层目录 tomcat 的logs目录执行tail -f catalina.out查看日志 ps -ef|grep tomcat 查看tomcat进程 kil ...