React-Native中Array的key警告
2017-04-23 23:39
429 查看
我们在项目里面,经常会用的批次渲染,比如一个列表渲染很多个item,或者一个横排或者竖排同时渲染多个数据等这种情况,一个个写显然是最笨的做法,当数据多时根本无法做到,此时很多人都会想到以下做法:
这样写确实是一个非常不错的做法,但是这样写,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, 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, backgroundColor: 'white', 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-native中debug报错信息:Each child in an array or iterator should have a unique "key" prop.
- React-Native中Array渲染的key的作用
- ReactNativeiOS(三)开发零碎3 warning: Each child in ar array or integrator should have a unique "key" prop
- react-native关闭所有黄色警告
- react-native 警告之In next release empty section headers will be rendered
- React总结7:Each child in an array or iterator should have a unique "key" prop.的处理方法
- ReactNative--程序中的警告,还没有处理
- react native key,ref,bind的作用和使用
- ReactNative Xcode升级到8.0后报错 忽略返回值的函数声明警告未使用的结果属性
- react-native 警告之module does not exist in the module map or in these directories
- ios的警告不针对react native A warning from Apple [resolved, not about React Native]
- [原创]最近使用React-Native的适配问题和警告搜集
- 解决警告:View.propTypes has been deprecated and will be removed in a future version of ReactNative
- react-native数组的重复警告
- 使用React-Native的适配问题和警告搜集
- ReactNative警告:bind(): React component methods may only be bound to the component instance
- Reactive-Native学习:iOS工程内嵌React-Native打包(三)
- Node.js & ES6 & react-native
- 点击Android按钮跳转到React-native指定界面