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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/430151.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

python怎么获取时间_Python:如何从datetime.timedelta对象中获取时间?

在我看来&#xff0c;MySQL中的TIME类型旨在表示时间间隔&#xff0c;就像Python中的datetime.timedelta那样。从您引用的文档中&#xff1a;TIME values may range from -838:59:59 to 838:59:59. The hours part may be so large because the TIME type can be used not only…

腾讯视频客户端导出MP4格式

腾讯视频下载下来之后是.qlv格式&#xff0c;这种格式只能使用客户端播放。感觉挺蛋疼的&#xff0c;Mp4好不容易让各种设备都可以统一播放视频了&#xff0c;这样一搞感觉又倒退了几十年&#xff0c;关键的是&#xff0c;有些资源是腾讯独家的&#xff0c;不装客户端就看不了&…

Java上传文件到MongoDB GirdFS

上传有两种方式&#xff0c;一种是使用UploadFromStream&#xff0c;另外一种是OpenUploadStream方式&#xff0c;这里使用的是第二种方式&#xff1a; public ObjectId save(){GridFSBucket gfsbk GridFSBuckets.create(db, "user_photo");byte[] data "Data…

js后退页面不重新加载_快应用:支持加载单独JS文件的规范思考

当前快应用的项目中&#xff0c;支持加载其它JS文件&#xff08;通过&#xff1a;require(./foo.js)&#xff09;&#xff0c;然后通过webpack工具处理依赖&#xff0c;最终完成页面JS的构建&#xff0c;其中页面JS包含了引入的所有JS内容&#xff1b;本文讨论的主要是&#xf…

Linux Linux程序练习七

题目&#xff1a;实现两个程序mysignal、mycontrl&#xff0c;mycontrl给mysignal发送SIGINT信号&#xff0c;控制mysignal是否在屏幕打印“hello”字符串。 //捕捉信号#include <stdio.h> #include <stdlib.h> #include <string.h> #include <errno.h>…

python读取每一行文字二十四_python接口自动化(二十四)--unittest断言——中(详解)...

简介上一篇通过简单的案例给小伙伴们介绍了一下unittest断言&#xff0c;这篇我们将通过结合和围绕实际的工作来进行unittest的断言。这里以获取城市天气预报的接口为例&#xff0c;设计了 2 个用例&#xff0c;一个是查询北京的天气&#xff0c;一个是查询南京为例&#xff0c…

spring MVC配置form支持PUT和DELETE方法

REST的关键原则之一就是“使用标准接口”&#xff08;the use of the Uniform Interface&#xff09;&#xff0c;也就是提倡根据不同的语义使用GET, PUT, POST和DELETE方法&#xff0c;而html的form标签只支持两种提交方法&#xff1a;POST和GET&#xff0c;所以&#xff0c;为…

如何学习编译原理?

编译原理很难学&#xff0c;但如果自己动手编&#xff0c;会简单一点&#xff0c;而且不要想一口吃成胖子&#xff0c;从词法分析开始写&#xff0c;一步步来&#xff0c;下个龙书电子版看看。慢慢来&#xff0c;一点一点地去消化它&#xff0c;让它成为你的知识。 转载于:http…

Spring MVC访问不到静态资源

运行Spring MVC项目&#xff0c;发现.css&#xff0c;js等文件加载不了&#xff0c;一般是spring MVC的拦截匹配导致的。 例如我在web.xml里这样配置&#xff1a; <servlet><servlet-name>spring</servlet-name><servlet-class>org.springframework.w…

206. Reverse Linked List

Reverse a singly linked list. Solution 1: 思路&#xff1a;null的使用。用一个null node来承接&#xff0c;一个一个接上去即可。一刷的时候还觉得这node转化好麻烦好神奇&#xff0c;熟悉之后其实做起来很快。 /*** Definition for singly-linked list.* public class List…

labview项目实例_labview操作者框架

0.引言操作者框架适合于多并行任务的项目。在这样的项目中&#xff0c;多个并行任务之间往往需要相互通信&#xff0c;传统的解决办法是&#xff0c;每个任务一个队列&#xff0c;一个while循环&#xff0c;多任务项目需要在一个程序框图使用多个while&#xff0c;不好看。NI说…

eclipse发布web不带项目名的url

默认发布后访问地址是&#xff1a; http://localhost:8080/huanle/ 要达到的效果是&#xff1a; http://localhost:8080/ 不带项目名的url的好处是&#xff0c;不用再在每个地址前加<% path%>了&#xff1a; &#xff08;很烦有木有&#xff09; 操作方法&#x…

php 随机在文章中添加锚文本_页面SEO优化的锚文本优化概念

SEO优化分为结构优化和页面优化&#xff0c;页面的SEO优化中其中一个重点是锚文本的建设。锚文本的概念就是网站的内部链接&#xff0c;较为常见的就是将文章中的关键词作为锚文本。但在具体建设当中&#xff0c;很多网站对锚文本的处理出现了很多错误。这是因为对锚文本的优化…

求一个整数数组的最大元素,递归方法实现

Java版本&#xff1a; public class Main {public static void main(String[] args) {int[] array {1, 3, 5, 6, 3, 5, 3, 8};System.out.println(findMaxValue(array));}private static int findMaxValue(int[] array) {if(array.length < 0 || array null) {return -1;}…

eclipse发布web显示异常,清除缓存也无效?

发布的项目突然之间显示就不正常了&#xff0c;清除了n遍缓存&#xff0c;tomcat目录&#xff0c;一点效果都没有&#xff0c;这时候&#xff0c;应该用Dreamweaver检查下页面代码&#xff0c;很可能是你不小心删了点什么。 下面是一个血的教训&#xff0c;浪费了一上午时间&a…

python画图模块_学习python画图模块plotnine:第一步安装

官网链接https://plotnine.readthedocs.io/en/stable/index.html知乎介绍的文章https://zhuanlan.zhihu.com/p/47814353简单介绍语法类似于R语言的ggplot2包的python画图模块安装按照官网教程直接使用pip安装pip install plotnine遇到报错ERROR: Cannot uninstall certifi. It …

解决Oracle 11gR2 空闲连接过多,导致连接数满的问题

今天又遇到了11gR2连接数满的问题&#xff0c;以前也遇到过&#xff0c;因为应用那边没有深入检查&#xff0c;没有找到具体原因&#xff0c;暂且认为是这个版本Oracle的BUG吧。 上次的处理办法是用Shell脚本定时在系统中kill v$session.statusINACTIVE的连接&#xff0c;但是…

Java自定义标签

简单例子 实现一个标签分为两步&#xff1a;&#xff08;1&#xff09;继承SimpleTagSupport或TagSupport实现一个控制器&#xff08;2&#xff09;创建一个描述标签的tld文件。下面是一个简单例子&#xff1a; &#xff08;1&#xff09;实现一个标签控制器&#xff0c;向页…

python调用adb shell命令_Python之使用adb shell命令启动应用的方法详解

Python之使用adb shell命令启动应用的方法详解一直有一个心愿希望可以用Python做安卓自动化功能测试&#xff0c;在一步步摸索中&#xff0c;之前是用monkeyrunner&#xff0c;但是发现对于控件ID的使用非常具有局限性&#xff0c;尤其是ID的内容不便于区分具有重复性时&#x…

关于NPN和PNP传感器的应用区别(转载)

http://blog.csdn.net/greatwgb/article/details/9120735 PNP与NPN型传感器其实就是利用三极管的饱和和截止&#xff0c;输出两种状态&#xff0c;属于开关型传感器。但输出信号是截然相反的&#xff0c;即高电平和低电平。PNP输出是高电平1&#xff0c;NPN输出的是低电平0。 …