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

Question

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

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

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

Answer 1

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>
  )
}