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, }) } }
转载于:https://www.cnblogs.com/y-lin/p/5850168.html
react js 按条数 展开/折叠相关推荐
- js 控制展开折叠 div html dom
js 控制展开折叠 div html dom <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" ...
- html鼠标移动自动展开,JS实现鼠标滑过折叠与展开菜单效果代码
本文实例讲述了JS实现鼠标滑过折叠与展开菜单效果代码.分享给大家供大家参考.具体如下: 这是一款展开菜单特效,鼠标移上的时候自动展开,移走后自动折叠隐藏起来,运用了JS技术,并结合了CSS共同实现的效 ...
- js获取对象里数据条数
js获取对象里数据条数 对象无法使用length获取长度,需要使用js原生方法里的Object.keys方法进行获取,具体用法如下: let obj = {'a1': {'name': '张三''}, ...
- js打印分页、加标题、每页控制条数
js打印分页.加标题.每页控制条数 1.<body加入以下内容> <input class="btn btn-primary btn-sm" type=" ...
- js 展开折叠动画原理,jquery的toggle切换效果
效果图: 想法: jquery的展开折叠动画效果很好看,想自己实现一个,结果发现仅仅只靠css添加类和动画是不行,最开始的思路是折叠时候设置高度为0,展开时设置高度设置为auto,让他自己撑开,可是t ...
- React.js入门笔记
# React.js入门笔记 核心提示 这是本人学习react.js的第一篇入门笔记,估计也会是该系列涵盖内容最多的笔记,主要内容来自英文官方文档的快速上手部分和阮一峰博客教程.当然,还有我自己尝试的 ...
- 如何使用Webpack 4简化React.js开发过程
by Margarita Obraztsova 玛格丽塔(Margarita Obraztsova) 如何使用Webpack 4简化React.js开发过程 (How to streamline yo ...
- react.js基础
现在最热门的前端框架有AngularJS.React.Bootstrap等.自从接触了ReactJS,ReactJs的虚拟DOM(Virtual DOM)和组件化的开发深深的吸引了我,下面来跟我一起领 ...
- 前端框架React Js入门教程【转】
现在最热门的前端框架有AngularJS.React.Bootstrap等.自从接触了ReactJS,ReactJs的虚拟DOM(Virtual DOM)和组件化的开发深深的吸引了我,下面来跟我一起领 ...
最新文章
- DB2数据导入导出的小结
- 图灵的秘密:他的生平、思想及论文解读pdf
- itertools库
- SAP Spartacus central Travis build的lint环节
- java基础篇---网络编程(UDP程序设计)
- 可以生成自动文档的注释
- 汇编语言的简答入门--斐波那契数列(递归)
- Security+ 学习笔记21 认证
- TeamViewer 远程设备的画面黑屏怎么办?
- 矩阵连乘备忘录算法java_矩阵连乘(备忘录方法:自顶向下递归)
- 银行卡号识别(CTPN、Densenet、CTC)附数据集
- Appium连接夜神模拟器
- 金财致远咨询有限公司莅临美和易思参观交流
- 哪吒之魔童降世视听语言影评_动画电影《哪吒之魔童降世》艺术语言分析
- #Visio#教会你怎么安装和使用 Visio 哦 ~ ~
- 统计学--从对P值的理解谈起
- 加密解密-对称加密与非对称加密
- 美国顶级在线教育平台泄露22TB数据
- 初试百度vidpress一键生成视频
- 视频去水印工具推荐-视频去水印步骤
热门文章
- linux对目录进行操作,Linux 基础:对文件和目录进行操作的 Linux 和 Unix 命令 笔记...
- 信号量与令牌桶_限流的4种方式令牌桶实战
- python语句中对象未被定义_python 形参没有被定义???感觉遇到鬼了。。。
- k8s的认证和service account简述
- Python贪婪算法
- 59-混沌操作法感悟2.(2015.2.25)
- 仔细学习CSS(一)
- 动态条形图(RunBargraph)用于数据展示
- 修改Tomcat端口号
- android view滑动到顶部并固定在顶部