.map()renderRow()中的JSX数组

科林·里德尔

我在使用字符串数组并使用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] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章