javascript - JSX for...in 循环

Question

给定这个对象:

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 那样做但这与我的工作示例没有太大区别。

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

Answer 1

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. "))