JSX for...in loop
JSX for...in loop
给定此对象:
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://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
不是标准的。他们的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. "))
在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>
相关文章:
- jQuery setTimeOut: in for-loop
- 用于JavaScript中的In Loop用途
- Understanding For-in Loop
- setTimeout in jQuery with a loop
- Loop Wordpress Articles in Polymer
- Javascript jquery fade-in/fadeout loop,如何使用计时器
- javascript for in loop returning undefinded
- JavaScript: Promise chaining in foreach loop
- Javascript Logic In a loop/if statement
- JavaScript addEventListener in loop
- ParseQuery in a For Loop from array items
- .push breaking in for loop
- setTimeout with Loop in JavaScript
- 将存储在数组中的 url 传递给 window.open in for loop - Javascript
- jQuery append in loop - DOM 直到最后才更新
- jQuery.animate() in a for loop
- Async AjaxCall in a for loop Javascript
- Javascript 'var variable' in loop vs out out.性能上的任何差异
- Grunt Run in a For Loop
- 使用PHP Curl、Jquery In Loop获取多个url数据