// 初始化数据 this.state = { comments: [] } // 添加新的属性 showReplyInfo(index) { let items = this.state.comments; let item = items[index]; item.isLogin = this.state.isLogin; item.showReply = !item.showReply; this.setState({ items: items }); } // 循环处理数据 { comments ? comments.map((item, index) => <li className="row" key={item.pid} onClick={this.showReplyInfo.bind(this, index)}> <div className="author-photo col2"> <img src={item.avatar} /> </div> <div className="comment-content col8"> <div className="line1 row"> <div className="author-name col8">{item.author}</div> <div className="comment-floor col2"> {item.position==1?'沙发':item.position==2?'板凳':item.position==3?'地板':<span>{item.position}<sup>#</sup></span>} </div> </div> <div className="line2 row"> <div className="author-level">{item.group}</div> </div> <div className="line3 row"> <div className="content" dangerouslySetInnerHTML={{__html: XBBCODE.processBBSCode(decodeURIComponent(item.message))}}></div> </div> <div className="line4 row"> <div className="comment-time">{item.lastpost}</div> </div> </div> { item.showReply && item.isLogin ? <div className="managepost"> <ul> <li><Link to={`/reply-thread/`} className="managereply"><span className="icon-icon-reply-bold"></span>回复</Link></li> <li className="hidden"><a className="managereply" href="javascript:;"><span className="icon-thumb_up"></span>点赞</a></li> </ul> </div> : item.showReply && !item.isLogin ? <div className="manageloginpost"> <p>您登录后才可以回复,<a href={URL.login}>点击登录</a></p> </div> : '' } </li> ) : '' }
相关推荐
主要给大家介绍了基于React实现表单数据的添加和删除的方法,文中给出了详细的示例供大家参考,相信对大家具有一定的参考价值,需要的朋友们下面来一起看看吧。
React 起源于 Facebook 的内部项目,设计思想极其独特,代码逻辑简单,这个demo是绑定属性,显示图片,循环数据。
react-灵活基于promise的React数据加载器
React钩子来处理React组件中的异步操作(如获取数据)
一个简单的React组件,用于根据条件封装子项
一个简单的项目演示了React 单向数据流
2、数据和依赖包删除了,测试的时候自行添加数据与依赖 3、开发测试,首先用npm start 启动react 然后再用electron .启用electron,修改代码后,electron测试页面会自动刷新 4、react页面因为引入了electron的代码...
React Native版本的ViewPager控件,自动播放,无限循环。项目地址:https://github.com/race604/react-native-viewpager 效果图:使用说明: 运行 npm 安装 react-native-viewpager --save代码如下:var ViewPager...
Resonance: 通过 React 制作数据驱动的动画渐变
我们使用react的时候常常需要在一个组件传入的props更新时重新渲染该组件,常用的方法是在componentWillReceiveProps中将新的props更新到组件的state中(这种state被成为派生状态(Derived State)),从而实现重新...
react + datav 炫酷的大屏数据可视化展示.zip
03 React 创建组件、绑定属性( 绑定class 绑定style)、引入图片 循环数组渲染数据
获得任何React组件的位置和大小的属性
一个基于React和Redux的服务器处理数据表
以一种更加优雅的方式对react组件添加水印
react-native的一个添加购物车动画效果控件
所以这个 react 组件 mixin 是为了避免long script running alert通过将长数组子项切成块,并以异步方式渲染这些子项。例子 var arrayChunkRenderMixin = require ( 'react-array-chunk-render' ) ;var MyComponent...
仅仅只要表达出你的应用程序在任一个时间点应该长的样子,然后当底层的数据变了,React 会自动处理所有用户界面的更新。 声明式 (Declarative) 数据变化后,React 概念上与点击“刷新”按钮类似,但仅会更新变化的...
React Table - 一个快速、轻量级、固执己见的React数据表格
react-native模块,让您注册一个全局错误处理程序,可以捕获致命/非致命的未捕获异常