我有以下代码片段.
function addLinks () {
for (var i=0, link; i<5; i++) {
link = document.createElement("a");
link.innerHTML = "Link " + i;
link.onclick = function () {
alert(i);
};
document.body.appendChild(link);
}
}
Run Code Online (Sandbox Code Playgroud)
上面的代码用于生成5个链接,并使用alert事件绑定每个链接以显示当前链接ID.但它不起作用.当您单击生成的链接时,他们都会说"链接5".
但是以下代码片段可以满足我们的期望.
function addLinks () {
for (var i=0, link; i<5; i++) {
link = document.createElement("a");
link.innerHTML = "Link " + i;
link.onclick = function (num) {
return function () {
alert(num);
};
}(i);
document.body.appendChild(link);
}
}
Run Code Online (Sandbox Code Playgroud)
以上两个片段均引自此处.正如作者的解释,似乎关闭使魔术.
但它是如何工作的以及闭包如何使其工作都超出了我的理解范围.为什么第一个不工作而第二个工作?任何人都可以详细解释这个魔法吗?
谢谢.
我刚刚学习了React Native,我想用动态数据创建一系列按钮.我目前的代码是:
var locations = this.state.campus.map(function(item, key){
return(
<TouchableHighlight key={key}
style={[styles.button, (this.state.location==={item} && styles.buttonPressed)]}
underlayColor='#dddddd'
onPress={()=>this.buttonPress({item})} >
<Text style={
styles.plainText}>{item}</Text>
</TouchableHighlight>
)
Run Code Online (Sandbox Code Playgroud)
我的问题在于线条
style={[styles.button, (this.state.location==={item} && styles.buttonPressed)]}
Run Code Online (Sandbox Code Playgroud)
和
onPress={()=>this.buttonPress({item})}
Run Code Online (Sandbox Code Playgroud)
我正在尝试使用地图函数动态生成这些行.如果我使用静态数据(即单独生成每个按钮),但这些代码行完美无缺,但使用动态数据失败.代码确实产生了一个显示,所以问题不在于渲染,问题在于功能.
按下按钮,我得到的错误信息未在对象中定义,而样式只会导致整个显示不呈现.
很明显,动态数据({item})在Text元素内部工作,但在作为数据传递给其他两个元素时则不起作用.我尝试使用{{item}}但这会引发语法错误.
有没有办法在React Native中处理这样的动态数据?