react js 按条数 展开/折叠
//2条
const MAX_SHOW_NUM = 2; class HotDiscuss extends Component { static propTypes = {
//验证
repliedCommentList: PropTypes.array,
}; constructor(props) {
super(props);
this.state = {
//子评论折叠
isClick: true,
//评论
disClick: false,
//点赞
handle_like: false,
//子评论点赞
child_handle_like: false, }
} //生命周期
componentWillMount() {
//要数据
this.props.getDiscussListData(this.props.routeParams);
//分享
YztApp._setShareIsAvailable(false);
} //子评论
renderContent(detail, repliedCommentList) { //childitem: 子评论数组
//isShowMoreBtn: 子评论是否显示折叠几个字 let childitem, isShowMoreBtn;
if (repliedCommentList && repliedCommentList.length) { // >2条显示文字
isShowMoreBtn = repliedCommentList.length > 2; // 展开/折叠
repliedCommentList = repliedCommentList.slice(0, this.state.isClick ? MAX_SHOW_NUM : repliedCommentList.length); childitem = repliedCommentList.map((c, k) => {
return (
<div key={k} className="child_box">
<p className="child_img">
<img src={c.imageUrl} alt=""/>
</p>
<div className="dis_child_text" >
<div className="child_context">
<span ref="child_like" className="dis_praise">{c.likeCount}</span>
<p className="dis_child_left">
<span className="dis_child_name" >{c.senderName}</span>
<span className="dis_child_name hf" >回复</span>
<span className="dis_child_name" >{c.receiverName}</span>
</p>
</div>
<p className="dis_date">{c.createdTimeStr}</p>
<p className="child_text">{c.content}</p>
</div>
</div>
)
})
}
return (
//评论 );
} render() {
const {
detail,
//detail.repliedCommentList,
} = this.props;
return this.renderContent(detail, detail.repliedCommentList)
} // 展开/收起
child_open(){
this.setState({
isClick: !this.state.isClick,
})
} }
react js 按条数 展开/折叠的更多相关文章
- js 控制展开折叠 div html dom
js 控制展开折叠 div html dom <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" ...
- React JS 基础知识17条
1. 基础实例 <!DOCTYPE html> <html> <head> <script src="../build/react.js" ...
- JS点击查看更多内容 控制段落文字展开折叠
JavaScript+jQuery实现的文字展开折叠效果,点击文字后文字内容会完整的显示出来,控制段落来显示文字,不需要的时候,可以再次点击后将内容折叠起来,也就是隐藏了一部分内容.点击查看更多的功能 ...
- 数据多js平均时间取固定条数展示,echarts数据多处理数据
js代码: function getfailurerate(start,end,ip) { $.ajax( { url : "report/getvirtual.action", ...
- js根据数据条数与每页多少条数据计算页数,js前端计算页数
/** *根据数据条数与每页多少条数据计算页数 * totalnum 数据条数 * limit 每页多少条 */ function pageCount (totalnum,limit){ ...
- React.js入门笔记
# React.js入门笔记 核心提示 这是本人学习react.js的第一篇入门笔记,估计也会是该系列涵盖内容最多的笔记,主要内容来自英文官方文档的快速上手部分和阮一峰博客教程.当然,还有我自己尝试的 ...
- React.js 三周 -- 入门到搭建团队基础项目
吐槽 公司自己的产品,由于历史遗留问题,前端一直是和java放到一个项目里写的. 导致了,前端就被死死的绑在了IDEA战车上.想要看页面效果,先起几个java服务.想要调试一个改动,重启个java服务 ...
- 前端迷思与React.js
前端迷思与React.js 前端技术这几年蓬勃发展, 这是当时某几个项目需要做前端技术选型时, 相关资料整理, 部分评论引用自社区. 开始吧: 目前, Web 开发技术框架选型为两种的占 80% .这 ...
- 前端框架React Js入门教程【精】
现在最热门的前端框架有AngularJS.React.Bootstrap等.自从接触了ReactJS,ReactJs的虚拟DOM(Virtual DOM)和组件化的开发深深的吸引了我,下面来跟我一起领 ...
随机推荐
- 【BZOJ】2253: [2010 Beijing wc]纸箱堆叠
题意 三维严格偏序最长链.(\(n \le 50000\)) 分析 按第一维排序然后以第二和第三维作为关键字依次加入一个二维平面,维护前缀矩形最大值. 题解 当然可以树套树....可是似乎没有随机化算 ...
- 【BZOJ】1086: [SCOI2005]王室联邦
http://www.lydsy.com/JudgeOnline/problem.php?id=1086 题意:n个点的树,要求分块,使得每一块的大小在[b, 3b]内且块与某个点形成的块是连通的(某 ...
- 51nod算法马拉松13
A 取余最长路 不难发现路径可以拆成三条线段,只要知道两个转折点的位置就能计算出答案. 设sum(i,l,r)表示第i行从l到r元素的和,则答案可以表示为sum(1,1,x)+sum(2,x,y)+s ...
- Java数组转成list,list转数组
下面介绍一下Java中数组和List集合如何互相转换. 数组转成list 第一种: String[] userid = {"aa","bb","cc& ...
- html2canvas根据DOM元素样式实现网页截图
html2canvas是一个相当不错的JavaScript类库,它使用了html5和css3的一些新功能特性,实现了在客户端对网页进行截图的功 能.html2canvas通过获取页面的DOM和元素的样 ...
- 利用iframe将div放置在object的上面
这两天在写一个用object上传照片的网页,在上传时,需要弹出一个进度条的div,我就按照正常的思维模式,将进度条div设为绝对定位,将其z-index设置的很大,结果,进度条div被object给遮 ...
- CSS中id与class命名规则及编码最佳习惯
一.用class_name方式写类名. 以前喜欢用class-name写,不过好像两样也没什么差别.但我比较反对用className写类名,因为始终对浏览器大小写敏感的问题抱有怀疑态度.但是id我会写 ...
- Java I/O Basic
/* 记住每个类相应的用法*/流的分类: io包内定义了所有的流 分类: 方向:输入流.输出流 处理数据单位:字节流.字符流 功能不同:节点流.处理流 所有流类型,位于java.io包内,分别继承以下 ...
- 关于http协议的理解
一.状态码 1.200:请求成功. 2.302:浏览器进行重定向. 3.304:资源已使用,即有缓存. 4.404:请求失败,请求的资源未在服务器上发现. 5.500:服务器端发生错误. 二.php获 ...
- 服务器由于redis未授权漏洞被攻击
昨天阿里云拦截到了一次异常登陆,改了密码后就没有管他, 今天阿里云给我发消息说我的服务器可能被黑客利用,存在恶意发包行为....... 不过我不打算只是单纯的重置系统,经过一系列的查找原因后,发现被攻 ...