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 ...
随机推荐
- HTML5Viewer中如何运行时绑定多数据源
很多报表控件提供HTML5Viewer 支持跨设备的报表系统,当然在很多情况下,一个系统可包含多个报表文件,这些报表的数据有可能均为运行时绑定数据源,那么在html5viewer中对一张报表通过重写W ...
- c#基础3
Console.WriteLine("屏幕显示的内容"); Console.Write("屏幕显示的内容"); 两者区别是:Console.WriteLine( ...
- css table-cell实现图文排列水平对齐
今天遇到一个样式:图文两列排列. 由于图片大小固定,于是就想到了用table-cell实现. <div class="container"> <div class ...
- 使用script创建标签添加属性值和添加样式
<mark>使用script创建标签和给标签属性值以及样式的方法</mark><script> window.onload=function(){ var btn= ...
- 关于classList的API
<body class="a b c"> ...... </body> document.body.classList可以取得body的classList属 ...
- occ添加新的捕捉模式
Load (theSelection, theShape, theType, theDeflection, theDeviationAngle, isAutoTriangulation, thePri ...
- Oracle 数据库特殊查询总结
1. 查询本节点及本节点以下的所有节点: select * from table1 c start with c.p_id='0000000' connect by prior c.id=c.p_id ...
- docker --命令
1.开启服务 sudo docker start 服务名 2.预览列出所有的容器 sudo docker ps -a 3.进入文件 cd 4.预览文件目录 ls 5.预览文件内容 more 6.拷贝文 ...
- bzoj2006: [NOI2010]超级钢琴
题意:给一个序列(n<=500000),要求选定k个不同区间,使得区间长度在L,R之间,并使得k个区间和之和最大,输出这个最大值. 刚拿到题的时候想的是,对于每个点,如果以它开头,那么之后的L- ...
- codeblocks个性化配置
1.general setting设置默认字体大小设置控制台字体大小:"Settings -> Environment -> View -> Message logs' f ...