//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 按条数 展开/折叠的更多相关文章

  1. js 控制展开折叠 div html dom

    js 控制展开折叠 div    html dom <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" ...

  2. React JS 基础知识17条

    1. 基础实例 <!DOCTYPE html> <html> <head> <script src="../build/react.js" ...

  3. JS点击查看更多内容 控制段落文字展开折叠

    JavaScript+jQuery实现的文字展开折叠效果,点击文字后文字内容会完整的显示出来,控制段落来显示文字,不需要的时候,可以再次点击后将内容折叠起来,也就是隐藏了一部分内容.点击查看更多的功能 ...

  4. 数据多js平均时间取固定条数展示,echarts数据多处理数据

    js代码: function getfailurerate(start,end,ip) { $.ajax( { url : "report/getvirtual.action", ...

  5. js根据数据条数与每页多少条数据计算页数,js前端计算页数

    /**  *根据数据条数与每页多少条数据计算页数   * totalnum 数据条数  * limit 每页多少条  */ function pageCount (totalnum,limit){   ...

  6. React.js入门笔记

    # React.js入门笔记 核心提示 这是本人学习react.js的第一篇入门笔记,估计也会是该系列涵盖内容最多的笔记,主要内容来自英文官方文档的快速上手部分和阮一峰博客教程.当然,还有我自己尝试的 ...

  7. React.js 三周 -- 入门到搭建团队基础项目

    吐槽 公司自己的产品,由于历史遗留问题,前端一直是和java放到一个项目里写的. 导致了,前端就被死死的绑在了IDEA战车上.想要看页面效果,先起几个java服务.想要调试一个改动,重启个java服务 ...

  8. 前端迷思与React.js

    前端迷思与React.js 前端技术这几年蓬勃发展, 这是当时某几个项目需要做前端技术选型时, 相关资料整理, 部分评论引用自社区. 开始吧: 目前, Web 开发技术框架选型为两种的占 80% .这 ...

  9. 前端框架React Js入门教程【精】

    现在最热门的前端框架有AngularJS.React.Bootstrap等.自从接触了ReactJS,ReactJs的虚拟DOM(Virtual DOM)和组件化的开发深深的吸引了我,下面来跟我一起领 ...

随机推荐

  1. ACM: 限时训练题解-Street Lamps-贪心-字符串【超水】

    Street Lamps   Bahosain is walking in a street of N blocks. Each block is either empty or has one la ...

  2. [知识点]A*搜索(启发式搜索)

    // 此博文为迁移而来,写于2015年4月4日,不代表本人现在的观点与看法.原始地址:http://blog.sina.com.cn/s/blog_6022c4720102vwud.html 1.前言 ...

  3. BZOJ4127: Abs

    Description 给定一棵树,设计数据结构支持以下操作 1 u v d 表示将路径 (u,v) 加d 2 u v 表示询问路径 (u,v) 上点权绝对值的和 Input 第一行两个整数n和m,表 ...

  4. SVN错误:Attempted to lock an already-locked dir

    在eclipse里提交和更新文件是报错: Attempted to lock an already-locked dir svn: Working copy 'F:\workspace\WebFram ...

  5. Linux查看操作系统时间

    date命令的功能是显示和设置系统日期和时间. 该命令的一般格式为: date [选项] 显示时间格式(以+开头,后面接格式) date 设置时间格式 命令中各选项的含义分别为: -d datestr ...

  6. 最长公共子序列 LCS

    题目链接:http://acm.hust.edu.cn/vjudge/contest/view.action?cid=87125#problem/D 题目: Description In a few ...

  7. hdu杭电1671 / poj3630 字典树

    传送门 题意:输入n串数字 找出是否有存在串的前缀与另一个串相同 如果存在 输出NO否则输出YES 思路:用字典树解决 标记字典树总串的结尾 查找出一个串内部是否有被标记的节点 如果有那么说明存在前缀 ...

  8. mysql连接查询语句示例

    eg: 内连接:     select student.*,grade.* from student join grade where student.sid=grade.sid;     selec ...

  9. javascript平时小例子①(移动的小div)

    css样式: #box{ width: 300px; height: 300px; background: deepskyblue; position: absolute; margin-right: ...

  10. 2016huasacm暑假集训训练三 C - Til the Cows Come Home

    题目链接:http://acm.hust.edu.cn/vjudge/contest/123674#problem/C N题目大意是有n个点,然后给出从a点到b点的距离,a和b是互相可以抵达的,则是无 ...