（草稿）

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

 <!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. CentOS忘记密码或者丢失口令解决方法

    重启系统,然后再五秒之内按下任意键. 进入下面画面后按 [ e ] 键   把光标移动到第二行(或者找到以kernel /vmlinuz开头的),再按下 [ e ] 键   在文本结尾处空一格再添加s ...

  2. ZOJ 2048 highways

    题目 比我想象地要容易很多..一开始想得太复杂了,本来想试一下kruskal算法的,嫌麻烦..还是用了之前1203的prim算法...以为要注意这道题的输出顺序,结果不用,直接输出就可以了,就是注意一 ...

  3. 机器学习之决策树熵&信息增量求解算法实现

    此文不对理论做相关阐述,仅涉及代码实现: 1.熵计算公式: P为正例,Q为反例 Entropy(S)   = PLog2(P) - QLog2(Q); 2.信息增量计算: Gain(S,Sv) = E ...

  4. 本地搭建PHP环境后进入应用失败

    进入localhost/wordpress或者其他应用,直接出现类似以下这种情况: 解决方法是修改tomcat的配置文件httpd.conf中: <IfModule dir_module> ...

  5. FPGA 相同模块 VIVADO synthesis综合后

    显示所用的LUT as Memory结果不一致可能是什么原因导致的?

  6. 【转】【翻译】对响应式SVG的再思考

    来源: http://www.w3ctech.com/topic/1555 原文地址:http://www.smashingmagazine.com/2014/03/rethinking-respon ...

  7. PHP实现文件上传

    一.关于全局变量$_FILES $_FILES包含有所有上传的文件信息.假设文件上传字段的名称为 img.则 $_FILES['img']['name']:客户端上传的文件的原名称. $_FILES[ ...

  8. TypeError: window.open is not a function

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

  9. HttpContext.GetOwinContext().Authentication 报错 解决办法

    HttpContext.GetOwinContext().Authentication 会提示 不包含GetOwinContext 方法的报错信息 解决办法:引入system.web程序集,GetOw ...

  10. Linux 关机命令

    正确的关机流程是:sync –> shutdown/reboot/halt/poweroff sync 将数据由内存同步到硬盘中. shutdown 关机指令.例如你可以运行如下命令关机: sh ...