JSX for ... in循环

鉴于这个对象：

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 ，并且像在这篇文章中那样做，但这与我的工作示例没有多大区别。

要明确 - 我有它的工作，我只是希望在范围问题上更清楚（如果是这样的话，语法错误），在我的第二个例子。

---

JSX只是糖被转换为React.createElement的一堆函数调用，您可以在这里找到这些文档：https： React.createElement .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 javascriptn"),
    h('p',
      "the intension is for this to be used to createn",
      "reusable, interactive html widgets. "))

---

在你的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>

链接地址: http://www.djcxy.com/p/52057.html

上一篇: JSX for...in loop

下一篇: Creating simple table