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,
        })
    }

}