当前位置:首页 > 开发 > 软件应用 > 正文

React 更新数据array子项添加新的属性便于循环处理

发表于: 2016-04-12   作者:qiaolevip   来源:转载   浏览:
摘要: //初始化数据 this.state={ comments:[] } //添加新的属性 showReplyInfo(index){ letitems=this.state.comments; letitem=items[index]; item.isLogin=this.state.isLogin; item.showReply=!item.showReply; this.
// 初始化数据
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 更新数据array子项添加新的属性便于循环处理

  • 0

    开心

    开心

  • 0

    板砖

    板砖

  • 0

    感动

    感动

  • 0

    有用

    有用

  • 0

    疑问

    疑问

  • 0

    难过

    难过

  • 0

    无聊

    无聊

  • 0

    震惊

    震惊

版权所有 IT知识库 CopyRight © 2009-2015 IT知识库 IT610.com , All Rights Reserved. 京ICP备09083238号