React 更新数据array子项平添新的属性便于循环处理
React 更新数据array子项添加新的属性便于循环处理
// 初始化数据 this.state = { comments: [] } // 添加新的属性 showReplyInfo(index) { let items = this.state.comments; let item = items[index]; item.isLogin = this.state.isLogin; item.showReply = !item.showReply; this.setState({ items: items }); } // 循环处理数据 { comments ? comments.map((item, index) => <li className="row" key={item.pid} onClick={this.showReplyInfo.bind(this, index)}> <div className="author-photo col2"> <img src={item.avatar} /> </div> <div className="comment-content col8"> <div className="line1 row"> <div className="author-name col8">{item.author}</div> <div className="comment-floor col2"> {item.position==1?'沙发':item.position==2?'板凳':item.position==3?'地板':<span>{item.position}<sup>#</sup></span>} </div> </div> <div className="line2 row"> <div className="author-level">{item.group}</div> </div> <div className="line3 row"> <div className="content" dangerouslySetInnerHTML={{__html: XBBCODE.processBBSCode(decodeURIComponent(item.message))}}></div> </div> <div className="line4 row"> <div className="comment-time">{item.lastpost}</div> </div> </div> { item.showReply && item.isLogin ? <div className="managepost"> <ul> <li><Link to={`/reply-thread/`} className="managereply"><span className="icon-icon-reply-bold"></span>回复</Link></li> <li className="hidden"><a className="managereply" href="javascript:;"><span className="icon-thumb_up"></span>点赞</a></li> </ul> </div> : item.showReply && !item.isLogin ? <div className="manageloginpost"> <p>您登录后才可以回复,<a href={URL.login}>点击登录</a></p> </div> : '' } </li> ) : '' }