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>
  ) : ''
}

 

有疑问或技术交流，扫描公众号一起讨论学习。

更多React在线学习访问：http://each.sinaapp.com/react/index.html