（草稿）

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

  1.  <!DOCTYPE html>
  2.  <html>
  3.  <head>
  4.      <title>React ListView</title>
  5.      <!--
  6.      做一个列表控件，列表元素的模板可以设置，模仿ItemTemplate
  7.      -->
  8.      <script src="../build/react-with-addons.js" type="text/javascript"></script>
  9.      <script src="../build/JSXTransformer.js" type="text/javascript"></script>
  10.      <style type="text/css">
  11.      .selected{
  12.          color: red;
  13.      }
  14.      </style>
  15.  </head>
  16.  <body>
  17.  
  18.  <script type="text/jsx">
  19.  
  20.      var TextItem = React.createClass({
  21.          render:function(){
  22.              var item = this.props.item;
  23.              return <p>this is {item}</p>
  24.          }
  25.      });
  26.  
  27.      var Template = React.createClass({
  28.          render:function(){
  29.              return React.createElement(this.props.type,this.props);
  30.          }
  31.      });
  32.  
  33.      var ListViewItem = React.createClass({
  34.          render:function(){
  35.              var item = this.props.item;
  36.              var cls = this.props.isSelected?'selected':'';
  37.              if(this.props.template){ /*有没有模板内容不同*/
  38.                  return <li className={cls} onClick={this.props.onClick}><Template type={this.props.template} item={item}></Template></li>;
  39.              }else{
  40.                  return <li className={cls} onClick={this.props.onClick}>{item}</li>;
  41.              }
  42.          }
  43.      }); 
  44.  
  45.      var ListView = React.createClass({
  46.          getInitialState: function() {
  47.            return {selectedItem: ''};
  48.          },
  49.          onSelect:function(item){
  50.              this.setState({selectedItem:item});
  51.              console.log('selected item:' + item);
  52.          },
  53.          render: function() {
  54.              var itemTemplate = this.props.itemTemplate?this.props.itemTemplate:'';
  55.              var selectedItem = this.state.selectedItem;
  56.              return (
  57.                  <ol>
  58.                  {
  59.                      this.props.items.map(function (item,i) {
  60.                          var isSelected = (item ==selectedItem);
  61.                            return <ListViewItem key={i} item={item} template={itemTemplate} isSelected={isSelected} onClick={this.onSelect.bind(this,item)}></ListViewItem>
  62.                      },this)
  63.                  }
  64.                  </ol>
  65.              );
  66.          }
  67.      }); 
  68.  
  69.      var items=['item1','item2','item3'];
  70.      React.render(
  71.          <ListView items={items} itemTemplate={TextItem}>
  72.          </ListView>,
  73.          document.body
  74.      );
  75.  </script>
  76.  </body>
  77.  </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. OpenGL利用模板测试实现不规则裁剪

    本文是原创文章,如需转载,请注明文章出处 在游戏开发中,经常会有这样的需求:给定一张64x64的卡牌素材,要求只显示以图片中心为圆点.直径为64的圆形区域,这就要用到模板测试来进行不规则裁剪. 实现不 ...

  2. JavaScript中如何获取某年某月有多少天的问题

    function getDaysInOneMonth(year, month){ month = parseInt(month,10); var d= new Date(year,month,0); ...

  3. php 使用curl模拟登录discuz以及模拟发帖

    <?php$discuz_url = 'http://127.0.0.1/discuz/';//论坛地址$login_url = $discuz_url .'logging.php?action ...

  4. java replace和replaceAll

    replace和replaceAll是JAVA中常用的替换字符的方法 public String replace(char oldChar, char newChar)         在字符串中用n ...

  5. uva 10271 (dp)

    题意:有n个数据,给定k,要从中选出k+8个三元组(x,y,z,其中x<=y<=z),每选一次的代价为(x-y)^2,求最小代价和. [解题方法] 将筷子按长度从大到小排序 排序原因: 由 ...

  6. a链接中套a链接

    <a href="baidu.com"> <div> <div class="title">百度</div> & ...

  7. String的方法

    String str = "djsfkskfjs" . str.indexof():括号里面写你查找的字符,从strd的第一个开始找,找到第一个相同的字符,得到该字符的数组下标. ...

  8. MYSQL获取自增ID的四种方法

    MYSQL获取自增ID的四种方法 1. select max(id) from tablename 2.SELECT LAST_INSERT_ID() 函数 LAST_INSERT_ID 是与tabl ...

  9. 在 Linux 上配置一个 syslog 服务器

    syslog服务器可以用作一个网络中的日志监控中心,所有能够通过网络来发送日志的设施(包含了Linux或Windows服务器,路由器,交换机以及其他主机)都可以把日志发送给它. 通过设置一个syslo ...

  10. 【流程管理】【PCB】PCB设计流程

    添加封装 封装库用官方库,如没有添加补丁库,用原库或其他库中元件复制修改 调用封装时可先放置到PCB里进行测量 3D模型添加网站 封装库分类按厂商分类,常用器件按器件类型分类, 命名使用规范 导入PC ...