我在使用字符串数组并使用map()函数将其“转换”为JSX时遇到麻烦,以便JSX可以在ListView中制作一行或一行。
renderRow: function(rowData) { //rowData is an Array
return rowData.map((data) => {
// now data is a single element of my array
return <View><Text> <Emoji size={40} name={data} /></Text></View>
// also tried ( ) around the above for the return
});
},
render: function() {
return (
<ListView contentContainerStyle={styles.list}
enableEmptySections={true}
initialListSize={500}
pageSize={20}
dataSource={this.state.dataSource}
renderRow={(rowData) => this.renderRow(rowData)}
/>
)
}
我得到的错误如下:
StaticRenderer.render():必须返回有效的React元素(或null)。您可能返回了undefined,数组或其他无效对象。
因此,我知道这与地图中发生的事情有关,并且由于某种原因,JSX在renderRow()函数内部未正确构建。返回一些没有地图的基本JSX可以。.但是我需要能够对数组的所有元素进行处理。
map()甚至是执行此操作的最佳方法吗?任何帮助将不胜感激。
React不知道如何处理元素列表。每个组件render
方法以及类似的回调renderRow
通常都需要返回一个元素。
您需要将这些项目包装在View
或其他容器元素中:
renderRow: function(rowData) { //rowData is an Array
return (
<View>
{rowData.map((data) => {
return <View><Text> <Emoji size={40} name={data} /></Text></View>
})}
</View>
)
}
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句