（草稿）

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

 <!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. Cognos10安装注意事项

    cognos10用db2做content management注意事项 1. 建议用UTF-8格式字符2. 建议pagesize用8K或者8K以上3. 新建数据库缓冲池pagesize和以上1.2设置 ...

  2. wmware 怎么 跟主机相互通信

    VMnet1和VMware8其实就是软件模拟出来的两块网卡提供DHCP服务,两块网卡对应VMware的两种不同的模式VMWare提供了三种工作模式,它们是bridged(桥接模式).NAT(网络地址转 ...

  3. linux查找进程，查找僵死进程，查找僵死进程并自动杀掉

    查找进程: ps -aux | grep  flume  /  netstat -anop | grep 8080(端口号) 常规杀进程: kill  pid 查看僵死进程: ps -A -o sta ...

  4. 关闭显示器API及命令

    window下命令powercfg /change "Home/Office Desk" /moniter-timeout-ac 1C#中实现[DllImportAttribute ...

  5. 在Mac上安装Sublime Text3的插件

    首先安装插件管理器Package Control 打开Sublime, 按下快捷键 ctrl+', 然后粘贴下面的代码,然后按回车键: import urllib.request,os; pf = ' ...

  6. Galera集群server.cnf参数调整--前言

    文档安排: 前言部分会简述下galera集群,正文中会针对我们线上的环境,在不断业务的情况下,进行参数调整的话,有些参数不能够进行配置,会以#***的形式写入配置文件中,文档也会进行进一步说明. 如果 ...

  7. Rank() 、DENSE_RANK()、NTILE(n)的用法-转

    Rank() over()/DENSE_RANK()  over()的用法 1.Rank() over()/DENSE_RANK()  over() 这两个函数与ROW_NUMBER()函数类似,因为 ...

  8. WebService的两种方式Soap和Rest比较

    我的读后感:由于第一次接触WebService,对于很多概念不太理解,尤其是看到各个OpenAPI的不同提供方式时,更加疑惑.如google map api采用了AJAX方式,通过javascript ...

  9. 四核exynos4412开发板使用网线上网注意事项

    问:RP4412开发板板子可以插网线上网? 答:可以.支持WIFI.LAN.3/4G上网的.插网线没? 问:我插了,他还是提示让我连wifi. 答:你是上网页还是其他的APP. 网页可以直接打开,有部 ...

  10. nsmutableset

    // //  main.m //  nsmutableset // //  Created by 博博 on 16/1/11. //  Copyright (c) 2016年 com.bb. All ...