React学习——ListView组件
（草稿）
先把代码放上来，再补充说明
<!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组件的更多相关文章
- React学习笔记 - 组件&Props
React Learn Note 4 React学习笔记(四) 标签(空格分隔): React JavaScript 三.组件&Props 组件可以将UI切分成一些独立的.可复用的部件,这样你 ...
- React学习——ListView（Reflux）
接前一篇,把前面的ListView改成Reflux的形式 var BookActions=Reflux.createActions([ 'fetchList' ]); var BookStore = ...
- React 学习二 组件
React的一个最大的特点就是组件化的开发模式.今天就来试一下: <!DOCTYPE html> <html> <head> <meta charset=&q ...
- React学习——子组件给父组件传值
//子组件 var Child = React.createClass({ render: function(){ return ( <div> 请输入邮箱:<input onCha ...
- AntDesign(React)学习-15 组件定义、connect、interface
虽然常用的编码用一种即可,但是看别人文档或者示例时,有的写法不熟悉的话看着很不习惯,整理几种实现同一功能的不同写法 1.Dva Connect与@Connect import React, { Pro ...
- AntDesign(React)学习-1 创建环境
目录: AntDesign(React)学习-15 组件定义.connect.interface AntDesign(React)学习-14 使用UMI提供的antd模板 AntDesign(Reac ...
- 【React Native开发】React Native控件之ListView组件解说以及最齐全实例(19)
),React Native技术交流4群(458982758).请不要反复加群!欢迎各位大牛,React Native技术爱好者加入交流!同一时候博客左側欢迎微信扫描关注订阅号,移动技术干货,精彩文章 ...
- React Native常用组件之ListView组件
学习iOS开发的同学应该都知道UITableView,几乎每个APP中都有它的存在,而且衍生出各种形态:那么同样,ListView就是在React Native中的tableView,而且更加简单和灵 ...
- React Native的组件ListView
React Native的组件ListView类似于iOS中的UITableView和UICollectionView,也就是说React Native的组件ListView既可以实现UITableV ...
随机推荐
- CSS3--box-shadow
box-shadow:属性向框添加一个或多个阴影: 语法:box-shadow:h-shadow v-shadow blur pread color inset; h-shadow:必需,水平阴影的位 ...
- JavaScript实现快速排序
思想: 通过分治思想.递归方法将数据依次分解为包含较小元素和较大元素的不同子序列 1.在数组中选择一个元素为基准 2.对数组进行遍历,小于基准的元素都移到基准的左边,大于基准的元素都移到基准的右边 3 ...
- 会计凭证BAPI_ACC_DOCUMENT_POST
*&---------------------------------------------------------------------* *& Report ZFIFB107 ...
- guava学习--monitor
转载:https://my.oschina.net/realfighter/blog/349924 https://my.oschina.net/realfighter/blog/349926 M ...
- Topcoder SRM570 900 CurvyonRails
题意:给定一个网格,一些格子是障碍不用管,剩余的格子是城市,你可以修建铁路,铁路的形状可以是直的或者弯的,也就是说可以以这个点为节点连接它四联通的其中两个方块.要求用一个或多个环来覆盖所有城市.对于有 ...
- mysql sql语句大全
1.说明:创建数据库 CREATE DATABASE database-name 2.说明:删除数据库 drop database dbname 3.说明:备份sql server --- 创建 备份 ...
- iOS常用方法
1.磁盘总空间大小 + (CGFloat)diskOfAllSizeMBytes { CGFloat size = 0.0; NSError *error; NSDiction ...
- mybatis3.2.3+spring3 控制台打印sql解决办法
学习mybatis的时候遇到打印不出sql 的问题,在这里做个总结: 1:首先log4j.properties这样配置: log4j.rootLogger=DEBUG,console,R log4j. ...
- Bootstrap<基础十> 响应式实用工具
Bootstrap 提供了一些辅助类,以便更快地实现对移动设备友好的开发.这些可以通过媒体查询结合大型.小型和中型设备,实现内容对设备的显示和隐藏. 需要谨慎使用这些工具,避免在同一个站点创建完全不同 ...
- 机器学习相关的Awesome系列
Index Awesome 备注 1 Awesome Machine Learning 机器学习资源大全中文版 2 Awesome Artificial Intelligence 人工智能 3 Awe ...