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 中你不能有 for 循环。所以即使你的 for 循环周围有 {} 它也不起作用。而是使用如下代码所示的地图。假设您的数据 socials is an array 而不仅仅是一个对象。

如果社交是您需要使用的对象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>

Answer 2

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 循环作为参数传递。另一方面，映射调用 returns 数组，这是 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. "))

JSX for...in 循环

JSX for...in loop

javascript

jsx

reactjs