React学习——ListView组件

最新推荐文章于 2022-10-11 14:51:09 发布

weixin_34310369

最新推荐文章于 2022-10-11 14:51:09 发布

阅读量238

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/abiho/p/4554753.html

版权

（草稿）

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

 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>

第一步理解这个例子

转载于:https://www.cnblogs.com/abiho/p/4554753.html

weixin_34310369

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
React学习——ListView组件

（草稿）先把代码放上来，再补充说明 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>React ListView</title> 5 <!-- 6 做一个列表控件，列表元素的模板可以设置，模仿ItemTemplate 7 ...
复制链接

扫一扫