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>
}

但这并不意味着（社交未定义）：

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，但这与我的工作示例几乎没有区别。

明确一点 - 我已经让它工作了，我只是希望更清楚地了解我第二个示例中的作用域问题（或语法错误，如果有的话）。

- cyberwombat

---

将你的 for 循环用 {} 包围起来并尝试一下。虽然这样做可能有效，但通常使用 .map() 数组方法可以实现相同的结果。 - Diego Cardoso

@DiegoCardoso - 不行。当我尝试时，它会产生一个语法错误。这很奇怪，因为我认为括号中的东西可以是任何JS，但它不喜欢for循环。在同样的括号中使用map可以正常工作。 - cyberwombat

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 是另一个很好的虚拟DOM库的例子，但其中 JSX 不是标准的。他们在自己的README上的示例类似于没有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. "))

- m0meni

Answer 2

在JSX中不能使用for循环。因此，即使在for循环周围添加{}也无效。而是像下面的代码一样使用map。假设您的数据socials是一个数组而不仅仅是一个对象。

如果socials是一个对象，则需要使用Object.keys(socials).map(function(key)){} 。

class App extends React.Component {
  render() {
    let socialBar = null;
    let socials = [{
  foo: 'http://foo'
}]
if (socials) {
  socialBar = <div className='align-bottom text-center'>
                <ul className='list-inline social-list mb24'>
                  {socials.map(function(social, index) {
                     
                     return <li key={index}>
                     <a alt={index} href={social.foo}>{ social.foo }</a> 
                   </li>
                    
                  }) }
                </ul>
              </div>
}
    return (
      <div>{socialBar}</div>
    )
  }


}

ReactDOM.render(<App/>, document.getElementById('app'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.8/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.8/react-dom.js"></script>
<div id="app"></div>

- Shubham Khatri

---

有关这个的文档吗？我可以看到它不起作用，而map则可以 - 正如我所说，我已经让它工作了，所以我更多地是在寻找对jsx / scope语法的深入理解，而不是另一个解决方案。 - cyberwombat

@Yashua JSX只是一些被转译成函数调用的语法糖。它变成了类似于React.createElement(x, y, [React.createElement(x, y, [])])这样的东西。出于同样的原因，您不能将循环传递给函数参数，也不能将循环放入JSX中。React在这方面就像hyperscript https://github.com/dominictarr/hyperscript一样，因为它是一个虚拟DOM库。map调用返回一个数组，这是`React.createElement`的第三个参数。作为参数的for循环只是破碎的语法，就像`console.log(for (;;) console.log(hi))`一样。 - m0meni

@AR7 谢谢，那就是我在寻找的答案。请作为一个答案发布。 - cyberwombat