相关疑难解决方法(0)

Javascript臭名昭着的循环问题?

我有以下代码片段.

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)

以上两个片段均引自此处.正如作者的解释,似乎关闭使魔术.

但它是如何工作的以及闭包如何使其工作都超出了我的理解范围.为什么第一个不工作而第二个工作?任何人都可以详细解释这个魔法吗?

谢谢.

javascript closures

216
推荐指数
5
解决办法
7万
查看次数

通过map函数Re​​act Native传递参数

我刚刚学习了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中处理这样的动态数据?

native dynamic reactjs

10
推荐指数
1
解决办法
1万
查看次数

标签 统计

closures ×1

dynamic ×1

javascript ×1

native ×1

reactjs ×1