React-Native中Array的key警告

前端之家收集整理的这篇文章主要介绍了React-Native中Array的key警告前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

我们在项目里面,经常会用的批次渲染,比如一个列表渲染很多个item,或者一个横排或者竖排同时渲染多个数据等这种情况,一个个写显然是最笨的做法,当数据多时根本无法做到,此时很多人都会想到以下做法:

render(){ var eleArray = []; for(var i=0;i<ZWViewExample.examples.length;i++){  var ele=( <View style={{marginBottom: 10,backgroundColor: 'white',padding: 10}}> <Text style={{marginBottom: 10}}>{ZWViewExample.examples[i].title}</Text> {ZWViewExamdple.examples[i].render()} </View> ) eleArray.push(ele); } return( <ScrollView style={{flex:1}}> {eleArray} </ScrollView> ); }

这样写确实是一个非常不错的做法,但是这样写,React-Native会报一个警告,需要你对每个item添加一个key。

解决方法就是为View加上一个key,这个key可以成为每一个View的唯一标识,根据这个标识就可以找到指定的View进行操作。

改进后的写法为:

render(){ var eleArray = []; for(var i=0;i<ZWViewExample.examples.length;i++){  var ele=( <View style={{marginBottom: 10,padding: 10}} key={i}> <Text style={{marginBottom: 10}}>{ZWViewExample.examples[i].title}</Text> {ZWViewExamdple.examples[i].render()} </View> ) eleArray.push(ele); } return( <ScrollView style={{flex:1}}> {eleArray} </ScrollView> ); }

猜你在找的React相关文章