`

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

分享到:
评论

相关推荐

    基于React实现表单数据的添加和删除详解

    "基于React实现表单数据的添加和删除详解" React是Facebook开发的一款开源JavaScript库,用于构建用户界面。它基于组件的概念,允许开发者将UI分解为独立、可重用的组件,从而提高代码的可维护性和可读性。React中...

    03 React 创建组件、绑定属性( 绑定class 绑定style)、引入图片 循环数组渲染数据

    本课程主要讲解了React组件的创建、属性绑定(包括绑定class和style)、引入图片以及如何循环数组来渲染数据,这些都是React开发中的核心概念。 1. **创建组件**:React组件可以通过定义一个JavaScript类或使用函数...

    React学习03绑定属性,显示图片,循环数据

    React 起源于 Facebook 的内部项目,设计思想极其独特,代码逻辑简单,这个demo是绑定属性,显示图片,循环数据。

    react-一个基于React和Redux的服务器处理数据表

    在数据表应用中,Redux可以用来存储表格数据、筛选条件、排序规则等信息,并处理如加载新数据、更新数据、筛选和排序等操作。 在React和Redux结合使用时,通常遵循以下步骤: 1. **创建React组件**:首先,我们...

    react-Reactvis一组数据可视化图表React组件

    6. **与其他库集成**:React-vis可以与其他React库无缝集成,如Redux用于状态管理,或者D3.js库用于更底层的数据处理和图形绘制。 7. **文档和示例**:React-vis提供了详尽的文档和多个示例代码,帮助开发者快速...

    react-reactsparkline实现简单微线图sparklines的React组件

    在React生态系统中,开发人员经常需要为用户界面添加各种数据可视化元素,其中之一就是微线图(sparklines)。React Sparkline是这样一个库,它允许开发者轻松地在React应用中创建和集成小巧、简洁的微线图。这个库...

    react-一种简单且声明性的方法可以为您的React应用添加键盘快捷键

    此外,`react-keyboardist`允许你在组件生命周期的不同阶段动态地添加、删除或更新快捷键,这在处理动态数据或条件渲染时非常有用。例如,在`componentDidMount`或`componentDidUpdate`中根据当前状态调整`shortcuts...

    react-ReactVirtuoso是一个简单易用的React组件用于渲染庞大的数据列表

    React Virtuoso是一个高效且灵活的React组件,专门设计用于处理大数据列表的渲染。在现代Web应用中,尤其是在数据驱动的界面中,显示大量条目是常见的需求,例如表格、数据网格或者滚动列表。传统的渲染方式可能会...

    react-ReactTable一个快速轻量级固执己见的React数据表格

    6. **扩展性**:ReactTable提供了插件系统,可以扩展其功能,例如集成服务器端数据处理或添加自定义筛选器。 ### 使用ReactTable的基本步骤 1. **安装**:通过npm或yarn将ReactTable库引入到项目中。 ``` npm ...

    React移动端企业级数据项目实战[视频课程].txt打包整理.zip

    在本课程中,"React移动端企业级数据项目实战[视频课程]",我们将深入探讨如何使用React.js构建高效、可扩展的移动端数据应用。React作为一款强大的前端JavaScript库,由Facebook开发并维护,它专为构建用户界面特别...

    react-一个简单的React组件用于根据条件封装子项

    "react-一个简单的React组件用于根据条件封装子项"这个项目提供了一个实用的组件示例,它能够根据特定的条件来动态地渲染子组件。这种功能在实际开发中非常常见,比如在实现条件显示、逻辑判断或者数据过滤时。 ...

    react-Tipple一个轻量级的无依赖库用于通过REST利用React获取数据

    React-Tipple是一款专为React开发者设计的轻量级无依赖库,它简化了通过REST API获取和处理数据的过程。在React应用程序中,与服务器的通信通常涉及复杂的请求处理和状态管理,而React-Tipple旨在解决这个问题,提供...

    react 之 记账本案例

    7. **表单处理**:React提供了处理表单数据的方法,如`onChange`事件和`event.preventDefault()`来阻止默认提交行为。在记账本应用中,我们需要监听输入框的变更,并在用户提交时更新状态。 8. **路由**:对于包含...

    react-在react中轻松让你的数据产生动画

    React本身并不直接提供动画功能,但它可以通过一些库和策略实现数据驱动的动画效果。让我们深入探讨如何在React中轻松实现数据动画。 首先,我们需要理解数据驱动的动画概念。这种技术依赖于将动画效果与应用程序的...

    react-Reacthook用于创建QRCode数据URL

    在React开发中,React Hooks是现代React应用的核心组成部分,它们为无状态组件提供了状态管理和生命周期方法的处理方式。本篇文章将深入探讨如何使用React Hooks来创建QRCode数据URL,这在许多应用场景中都非常实用...

    react-React水印组件支持图片水印文字水印

    在React开发中,有时我们需要为应用添加自定义的水印功能,无论是为了版权保护、品牌宣传或是其他目的。"react-watermark-module" 是一个专为此设计的React组件,它允许开发者轻松集成图片水印和文字水印功能。下面...

    react-ReactNative中文网推出的代码热更新服务

    然而,尽管React Native提供了高效开发的优势,但在实际应用中,对于应用的更新仍然是一个挑战,特别是对于需要即时修复问题或者添加新功能的场景。这就是"代码热更新"服务的重要性。 "react-native-pushy"是一个...

    react新手练习demos

    6. **事件处理**: React事件处理机制与原生DOM事件处理略有不同,需要使用小驼峰命名法,例如`onClick`而不是`onclick`。在练习中,你会看到如何在组件中绑定和处理事件。 7. **状态提升**: 当多个组件需要共享状态...

    react-native-viewpager-React Native版本的ViewPager控件,自动播放,无限循环。.zip

    React Native版本的ViewPager控件,自动播放,无限循环。项目地址:https://github.com/race604/react-native-viewpager 效果图:使用说明: 运行 npm 安装 react-native-viewpager --save代码如下:var ViewPager...

    16 如何理解 React 中的更新与任务慕课专栏1

    React使用这个属性来处理优先级不同的更新,确保高优先级的更新能够及时被执行。当expirationTime到达时,如果某个更新还未执行,React会确保这个更新被处理。React中,expirationTime的值可以通过Math.pow(2, 31) -...

Global site tag (gtag.js) - Google Analytics