如何使用 React (Rails) 迭代数组

2024-03-04

我刚刚开始学习 React,我正在尝试找出如何找到我正在寻找的特定值。就像 Ruby 中有each.do 方法并且可以迭代数组一样,我正在尝试使用 React 来做到这一点。

class Gallery extends React.Component {
  render () {
    // debugger;
    return (
      <div>
      <img> {this.props.gallery.thumbnail_url} </img>
      </div>
    )
  }
}

I am trying to access the thumbnail._url and when using the debugger, I am not able to access all the objects and images. I thought of this.props.gallery.object.thumbnail_url and other ideas but I am not really sure of the best way! debugger information


Use Array.prototype.map()将数据映射到反应元素。并不是说循环中呈现的元素需要唯一标识符(keys https://facebook.github.io/react/docs/reconciliation.html#keys),使重新渲染列表的性能更高。

class Gallery extends React.Component {
  render () {
    const { gallery = [] } = this.props; // destructure the props with a default (not strictly necessary, but more convenient) 

    return (
      <div>
      {
       gallery.map(({ id, thumbnail_url }) => (
         <img key={ id } src={ thumbnail_url } />
       ))
      }
      </div>
    )
  }
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何使用 React (Rails) 迭代数组 的相关文章

随机推荐

  • windows批处理文件eq此时出乎意料

    我正在编写一个 Windows 批处理脚本来安装服务 首先 我需要查找该服务是否已经存在 如果服务存在 它必须检查状态 如果状态正在运行 则必须停止并删除服务 这是我的代码 test bat 我正在从命令行运行它 for F tokens
  • 操作栏中的自定义主页图标 Sherlock

    我正在尝试使用设置主页图标的自定义图标ActionBarSherlock 库 http actionbarsherlock com 我尝试使用设置自定义布局abHomeLayout我的自定义主题中的属性 但这对我不起作用 唯一的方法 如何设
  • FieldValue.increment 不起作用,但添加“操作数”

    我正在使用 firebase 数据库和一个带有新功能的简单函数FieldValue increment https firebase google com docs reference js firebase firestore Field
  • 在 JavaScript 中执行继承

    现在 虽然我知道您不能像在 C 中那样执行继承 但我在互联网上看到它提到这是可能的 如果无法使用纯 JavaScript 代码 那么是否可以使用Ext JS http en wikipedia org wiki Ext JS如果是这样怎么办
  • 伊莎贝尔的文件准备

    我想获得与相关的 LaTeX 代码这个理论 https github com rjraya Isabelle blob master curves Hales thy 以前的答案仅提供文档的链接 让我描述一下我做了什么 我去了目录Hales
  • Eclipse PDT 插件安装

    我尝试在 Eclipse 中安装 PDT 插件 但出现错误 Cannot complete the install because one or more required items could not be found Software
  • Firebase 身份验证 - 过期的 api 密钥

    我正在开发一个无服务器客户端应用程序 它使用 Firebase 身份验证和 Google 的其他服务 一切都很顺利 突然 FB 登录身份验证停止工作 当尝试登录用户时 我会收到一个 400 BADREQUEST 其正文如下 error co
  • 使用 Socket.IO 发送数据的频率是多少?

    我正在创建一个 Web 应用程序 需要频繁地将少量数据 每个套接字 3 个整数值 从服务器发送到客户端 并且我想看看是否有使用更新客户端的最大频率套接字IO https socket io 我希望能够实现至少 50 个套接字连接 每个连接每
  • 在Delphi XE2上使用MSBuild编译运行时包时出现编译错误

    我正在将我们的构建服务器 Jenkins 升级到Delphi XE2 编译运行时包时出现以下错误 ComponentsR vrc 61 error RC2135 file not found ComponentsR Icon4 ico 此运
  • drawViewHierarchyInRect:afterScreenUpdates: 延迟其他动画

    在我的应用程序中 我使用drawViewHierarchyInRect afterScreenUpdates 为了获得我视野中的模糊图像 使用AppleUIImage类别UI图像效果 https developer apple com do
  • 如何检测 WebView 页面何时尝试关闭?

    我有一个 WebView 我正在其中加载 facebook sharer php 页面 此页面没有任何形式的确认 它只是在用户共享或取消后关闭窗口 由于它被加载到网络视图中 因此本身没有什么可以 关闭 的 因此 我需要检测尝试关闭的窗口并对
  • 预压缩的 gzip 在 Chrome 上崩溃,为什么?

    我在我的网站上提供预压缩的 CSS 和 JS 文件 以及 IE6 8 和 FF 与我的 htaccess 文件完美配合 Compressed files RewriteCond HTTP Accept Encoding gzip AddEn
  • 将库从 Java 移植到 Python

    我即将将一个小型库从 Java 移植到 Python 并需要一些建议 小型 几千行代码 我研究了一点 Java 代码 并注意到两种语言中常见的一些设计模式 然而 肯定存在一些仅适用于 Java 的习惯用法 单例等 这些习惯用法在 Pytho
  • 传单测量转换的精确度

    map layerPointToLatLng map latLngToLayerPoint L latLng 40 687 73 9035 结果是 纬度 40 686886382151116 经度 73 90228271484375 不精确
  • 为什么我需要在setup.py中包含子包

    我有一个名为的 python 包mltester其中包含两个子包 actions dialogs 和一个主脚本ml tester py 结构如下
  • Application Insights 显示在实时指标中,但不显示在日志分析中

    So I created a Class library that configures microservices s Application Insights These are the Application Insights con
  • 在 SQL Server 2008 中使用 select where 查找一列上的重复项

    我试图从表中选择一列中有重复项的行 但也根据另一列限制行 它似乎工作不正常 select Id Terms from QueryData where Track Y and Active Y group by Id Terms having
  • 在 Solr 6.6 中配置 shardsWhitelist

    需要帮助在 Solr 6 6 中配置 shardsWhitelist 我在 Solr xml 中有以下行
  • Scrapy Splash不会执行lua脚本

    我遇到了一个问题 我的 Lua 脚本拒绝执行 ScrapyRequest 调用返回的响应似乎是 HTML 正文 而我期待的是文档标题 我假设 Lua 脚本从未被调用 因为它似乎对响应没有明显影响 我已经翻阅了很多文档 但似乎不太明白这里缺少
  • 如何使用 React (Rails) 迭代数组

    我刚刚开始学习 React 我正在尝试找出如何找到我正在寻找的特定值 就像 Ruby 中有each do 方法并且可以迭代数组一样 我正在尝试使用 React 来做到这一点 class Gallery extends React Compo