//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 按条数 展开/折叠相关推荐

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

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

  2. html鼠标移动自动展开,JS实现鼠标滑过折叠与展开菜单效果代码

    本文实例讲述了JS实现鼠标滑过折叠与展开菜单效果代码.分享给大家供大家参考.具体如下: 这是一款展开菜单特效,鼠标移上的时候自动展开,移走后自动折叠隐藏起来,运用了JS技术,并结合了CSS共同实现的效 ...

  3. js获取对象里数据条数

    js获取对象里数据条数 对象无法使用length获取长度,需要使用js原生方法里的Object.keys方法进行获取,具体用法如下: let obj = {'a1': {'name': '张三''}, ...

  4. js打印分页、加标题、每页控制条数

    js打印分页.加标题.每页控制条数 1.<body加入以下内容> <input class="btn btn-primary btn-sm" type=" ...

  5. js 展开折叠动画原理,jquery的toggle切换效果

    效果图: 想法: jquery的展开折叠动画效果很好看,想自己实现一个,结果发现仅仅只靠css添加类和动画是不行,最开始的思路是折叠时候设置高度为0,展开时设置高度设置为auto,让他自己撑开,可是t ...

  6. React.js入门笔记

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

  7. 如何使用Webpack 4简化React.js开发过程

    by Margarita Obraztsova 玛格丽塔(Margarita Obraztsova) 如何使用Webpack 4简化React.js开发过程 (How to streamline yo ...

  8. react.js基础

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

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

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

最新文章

  1. DB2数据导入导出的小结
  2. 图灵的秘密:他的生平、思想及论文解读pdf
  3. itertools库
  4. SAP Spartacus central Travis build的lint环节
  5. java基础篇---网络编程(UDP程序设计)
  6. 可以生成自动文档的注释
  7. 汇编语言的简答入门--斐波那契数列(递归)
  8. Security+ 学习笔记21 认证
  9. TeamViewer 远程设备的画面黑屏怎么办?
  10. 矩阵连乘备忘录算法java_矩阵连乘(备忘录方法:自顶向下递归)
  11. 银行卡号识别(CTPN、Densenet、CTC)附数据集
  12. Appium连接夜神模拟器
  13. 金财致远咨询有限公司莅临美和易思参观交流
  14. 哪吒之魔童降世视听语言影评_动画电影《哪吒之魔童降世》艺术语言分析
  15. #Visio#教会你怎么安装和使用 Visio 哦 ~ ~
  16. 统计学--从对P值的理解谈起
  17. 加密解密-对称加密与非对称加密
  18. 美国顶级在线教育平台泄露22TB数据
  19. 初试百度vidpress一键生成视频
  20. 视频去水印工具推荐-视频去水印步骤

热门文章

  1. linux对目录进行操作,Linux 基础:对文件和目录进行操作的 Linux 和 Unix 命令 笔记...
  2. 信号量与令牌桶_限流的4种方式令牌桶实战
  3. python语句中对象未被定义_python 形参没有被定义???感觉遇到鬼了。。。
  4. k8s的认证和service account简述
  5. Python贪婪算法
  6. 59-混沌操作法感悟2.(2015.2.25)
  7. 仔细学习CSS(一)
  8. 动态条形图(RunBargraph)用于数据展示
  9. 修改Tomcat端口号
  10. android view滑动到顶部并固定在顶部