.map() 将数组放入 renderRow() 中的 JSX

Question

我在使用 map() 函数将字符串数组 'converting' 放入 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(): A valid React element (or null) must be returned. You may have returned undefined, an array or some other invalid object.

因此我知道这与地图中发生的事情有关，并且出于某种原因，JSX 未在 renderRow() 函数内正确构建。在没有地图的情况下返回一些基本的 JSX 工作正常..但我需要能够为我的数组的所有元素做到这一点。

map() 是最好的方法吗？任何帮助将不胜感激。

Answer 1

React 不知道如何处理元素列表。每个组件 render 方法，以及像 renderRow 这样的回调，通常需要 return 单个元素。

您需要将项目包装在 View 或其他容器元素中：

renderRow: function(rowData) { //rowData is an Array
  return (
    <View>
      {rowData.map((data) => {
        return <View><Text> <Emoji size={40} name={data} /></Text></View>
      })}
    </View>
  )
}

.map() 将数组放入 renderRow() 中的 JSX

.map() an array into JSX inside renderRow()

javascript

mapping

jsx

ecmascript-6

react-native