//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 按条数 展开／折叠的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。