（草稿）

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

 <!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. A flash of Joy

    import re from datetime import timedelta from tornado import httpclient, gen, ioloop, queues peoples ...

  2. C# 反射浅析

    反射是一个运行库类型发现的过程.通过反射可以得到一个给定程序集所包含的所有类型的列表,这个列表包括给定类型中定义的方法.字段.属性和事件.此外,通过反射也可以动态的发现一组给定类支持的接口.方法的参数 ...

  3. 强大的命令行工具wmic

    1.wmic=Microsoft Windows Management Instrumentation 2. C:\WINDOWS\system32\wbem 下的东西,特别是.xsl格式化文件,实现 ...

  4. ThinkPHP 3.2.3（四）架构之多层MVC

    一.模型(Model)层 1.ThinkPHP支持多层Model,不同的模型层都继承自系统的Model类.   2.模型的多层通过目录结构和命名规范区分. 例如:在某个项目设计中需要区分数据层.逻辑层 ...

  5. ThinkPHP 3.2.3（三）架构之模块化设计

    一.概念 应用:基于同一个入口文件访问的项目称之为一个应用. 模块:一个应用下面可以包含多个模块,每个模块在应用目录下面都是一个独立的子目录,是一个包含配置文件.函数文件和MVC文件(目录)的集合. ...

  6. 利用windbg 分析IIS 的线程池w3wp程序多线程挂起问题

    前几天有个朋友发个了在windows server 2008跑的IIS 跑的程序w3wp程序dmp,要我帮忙分析为何线程都挂起不运行 经过查阅资料用windbg可以调试可以输出线程的调用堆栈,但是准备 ...

  7. merge,join,concat

    merge交集 join并集 concat axis=0 竖着连 axis=1 横着连

  8. js 10秒倒计时 功能

    请等待<span id=</span>秒 <script type="text/javascript"> function run(){ var s ...

  9. js正则表达式大全(2)

    在JAVASCRIPT里面判断一个字符串是否是电子邮件的格式: if(formname.email.value!=formname.email.value.match(/^\w +[@]\w +[.] ...

  10. sae评测报告-2013最新版

    Author:MoonXue 上线时间:2009年9月,国内最早. 支持语言:PHP.JAVA.PYTHON 版本管理:SVN 可选数据库:MySQ.KVDB(非关系型) 特色服务:Web服务器配置工 ...