鉴于此对象：
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>
}
在第二个例子中社交未定义的原因是什么？我假设内部括号有一个范围问题,但我没有成功修复它.
我可以用对象键做一个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',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'),'two'),'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"),"the intension is for this to be used to create\n","reusable,interactive html widgets. "))