jjzjj

javascript - JSX for...in 循环

coder 2024-07-19 原文

给定这个对象:

lst socials = {
  foo: 'http://foo'
}

我想在 JSX 中循环遍历它。这有效:

let socialLinks = []
let socialBar
for (let social in socials) {
  socialLinks.push(<li>
                     <a alt={social} href={socials[social]}>{ social }</a>
                   </li>)
}
if (socialLinks) {
  socialBar = <div className='align-bottom text-center'>
                <ul className='list-inline social-list mb24'>
                  {socialLinks}
                </ul>
              </div>
}

但这不是 (social undefined):

let socialBar
if (socials) {
  socialBar = <div className='align-bottom text-center'>
                <ul className='list-inline social-list mb24'>
                  for(let social in socials)
                  {<li>
                     <a alt={social} href={socials[social]}>{ social }</a> // social is undefined
                   </li>}
                </ul>
              </div>
}

第二个例子中 social 未定义的原因是什么？我假设内部括号存在范围问题，但我没有成功修复它。

我可以用对象键做一个 forEach 并像这个 post 那样做但这与我的工作示例没有太大区别。

需要说明的是——我让它工作了，我只是希望在我的第二个示例中更清楚地了解范围问题(或者语法错误，如果是的话)。

最佳答案

JSX 只是被转译成一堆 React.createElement 函数调用的糖，您可以在这里找到文档:https://facebook.github.io/react/docs/top-level-api.html#react.createelement 

ReactElement createElement(
  string/ReactClass type,
  [object props],
  [children ...]
)

基本上你的 JSX 来自

<div style="color: white;">
  <div></div>
</div>

到

React.createElement('div', { style: { color: 'white' } }, [
  React.createElement('div', {}, [])
])

出于同样的原因，你不能将循环传递给函数中的参数，你不能将循环放入 JSX 中。它最终看起来像

React.createElement('div', { style: { color: 'white' } }, [
  React.createElement('div', {}, for (;;) <div></div>)
])

这根本没有意义，因为您不能将 for 循环作为参数传递。另一方面，map 调用返回一个数组，这是 React.createElement 的第三个参数的正确类型。

React 归根结底仍然是一个虚拟 dom 库，但 JSX 只是让它写起来更熟悉。 hyperscript是 vdom 库的另一个很好的例子，但是 JSX 不是标准的。他们在自述文件中的示例类似于没有 JSX 的 React 的样子:

var h = require('hyperscript')
h('div#page',
  h('div#header',
    h('h1.classy', 'h', { style: {'background-color': '#22f'} })),
  h('div#menu', { style: {'background-color': '#2f2'} },
    h('ul',
      h('li', 'one'),
      h('li', 'two'),
      h('li', 'three'))),
    h('h2', 'content title',  { style: {'background-color': '#f22'} }),
    h('p',
      "so it's just like a templating engine,\n",
      "but easy to use inline with javascript\n"),
    h('p',
      "the intension is for this to be used to create\n",
      "reusable, interactive html widgets. "))

关于javascript - JSX for...in 循环，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39843520/

javascriptJSX39codesocialreactjs

有关javascript - JSX for...in 循环的更多相关文章

  1. ruby-on-rails - rails : "missing partial" when calling 'render' in RSpec test - 2

    我正在尝试测试是否存在表单。我是Rails新手。我的new.html.erb_spec.rb文件的内容是:require'spec_helper'describe"messages/new.html.erb"doit"shouldrendertheform"dorender'/messages/new.html.erb'reponse.shouldhave_form_putting_to(@message)with_submit_buttonendendView本身，new.html.erb，有代码:当我运行rspec时，它失败了:1)messages/new.html.erbshou

  2. ruby - 树顶语法无限循环 - 2

    我脑子里浮现出一些关于一种新编程语言的想法，所以我想我会尝试实现它。一位friend建议我尝试使用Treetop(Rubygem)来创建一个解析器。Treetop的文档很少，我以前从未做过这种事情。我的解析器表现得好像有一个无限循环，但没有堆栈跟踪；事实证明很难追踪到。有人可以指出入门级解析/AST指南的方向吗？我真的需要一些列出规则、常见用法等的东西来使用像Treetop这样的工具。我的语法分析器在GitHub上，以防有人希望帮助我改进它。class{initialize=lambda(name){receiver.name=name}greet=lambda{IO.puts("He

  3. ruby-on-rails - 在 Ruby 中循环遍历多个数组 - 2

    我有多个ActiveRecord子类Item的实例数组，我需要根据最早的事件循环打印。在这种情况下，我需要打印付款和维护日期，如下所示:ItemAmaintenancerequiredin5daysItemBpaymentrequiredin6daysItemApaymentrequiredin7daysItemBmaintenancerequiredin8days我目前有两个查询，用于查找maintenance和payment项目(非排他性查询)，并输出如下内容:paymentrequiredin...maintenancerequiredin...有什么方法可以改善上述(丑陋的)代

  4. ruby-on-rails - Rails 源代码 : initialize hash in a weird way? - 2

    在rails源中:https://github.com/rails/rails/blob/master/activesupport/lib/active_support/lazy_load_hooks.rb可以看到以下内容@load_hooks=Hash.new{|h,k|h[k]=[]}在IRB中，它只是初始化一个空哈希。和做有什么区别@load_hooks=Hash.new 最佳答案 查看rubydocumentationforHashnew→new_hashclicktotogglesourcenew(obj)→new_has

  5. ruby-on-rails - Rails 3 I18 : translation missing: da. datetime.distance_in_words.about_x_hours - 2

    我看到这个错误:translationmissing:da.datetime.distance_in_words.about_x_hours我的语言环境文件:http://pastie.org/2944890我的看法:我已将其添加到我的application.rb中:config.i18n.load_path+=Dir[Rails.root.join('my','locales','*.{rb,yml}').to_s]config.i18n.default_locale=:da如果我删除I18配置，帮助程序会处理英语。更新:我在config/enviorments/devolpment

  6. ruby-on-rails - 新 Rails 项目 : 'bundle install' can't install rails in gemfile - 2

    我已经像这样安装了一个新的Rails项目:$railsnewsite它执行并到达:bundleinstall但是当它似乎尝试安装依赖项时我得到了这个错误Gem::Ext::BuildError:ERROR:Failedtobuildgemnativeextension./System/Library/Frameworks/Ruby.framework/Versions/2.0/usr/bin/rubyextconf.rbcheckingforlibkern/OSAtomic.h...yescreatingMakefilemake"DESTDIR="cleanmake"DESTDIR="

  7. ruby - RuntimeError(自动加载常量 Apps 多线程时检测到循环依赖 - 2

    我收到这个错误:RuntimeError(自动加载常量Apps时检测到循环依赖当我使用多线程时。下面是我的代码。为什么会这样？我尝试多线程的原因是因为我正在编写一个HTML抓取应用程序。对Nokogiri::HTML(open())的调用是一个同步阻塞调用，需要1秒才能返回，我有100,000多个页面要访问，所以我试图运行多个线程来解决这个问题。有更好的方法吗？classToolsController0)app.website=array.join(',')putsapp.websiteelseapp.website="NONE"endapp.saveapps=Apps.order("

  8. ruby - Sinatra set cache_control to static files in public folder编译错误 - 2

    我不知道为什么，但是当我设置这个设置时它无法编译设置:static_cache_control，[:public，:max_age=>300]这是我得到的syntaxerror,unexpectedtASSOC,expecting']'(SyntaxError)set:static_cache_control,[:public,:max_age=>300]^我只想将“过期”header设置为css、javaascript和图像文件。谢谢。 最佳答案 我猜您使用的是Ruby1.8.7。Sinatra文档中显示的语法似乎是在Ruby1.

  9. ruby-on-rails - rails : check if the model was really saved in after_save - 2

    ActiveRecord用于在每次调用保存方法时调用after_save回调，即使模型没有更改并且没有生成插入/更新查询也是如此。这实际上是默认行为。在大多数情况下这没问题。但是一些after_save回调对模型是否实际保存的事情很敏感。有没有办法确定模型是否实际保存在after_save中？我正在运行以下测试代码:classStage 最佳答案 ActiveRecordusetocallafter_savecallbackeachtimesavemethodiscalledevenifthemodelwasnotchangedan

  10. ruby - Ruby 中的闭包和 for 循环 - 2

    我是Ruby的新手，有些闭包逻辑让我感到困惑。考虑这段代码:array=[]foriin(1..5)array[5,5,5,5,5]这对我来说很有意义，因为i被绑定(bind)在循环之外，所以每次循环都会捕获相同的变量。使用每个block可以解决这个问题对我来说也很有意义:array=[](1..5).each{|i|array[1,2,3,4,5]...因为现在每次通过时都单独声明i。但现在我迷路了:为什么我不能通过引入一个中间变量来修复它？array=[]foriin1..5j=iarray[5,5,5,5,5]因为j每次循环都是新的，我认为每次循环都会捕获不同的变量。例如，这绝对

随机推荐