JSX React天然中的功能图

Question

在我的程序中写入React Native我有此片段：

getCompanyFunction() {
  const { enterprises, navigation } = this.props;
  return (
    <ScrollView horizontal>
      <View style={{ display: 'flex', flexDirection: 'row', flexWrap: 'nowrap' }}>
        { enterprises.map((enterprise) => {
          return (
            <Card key={enterprise.id} containerStyle={{ width: Dimensions.get('window').width - 50 }}>
              <ListItem
                title={enterprise.name}
                subtitle={(
                  <View>
                    <Text style={{ color: theme.text.default }}>
                      {enterprise.fonction}
                    </Text>
                    <Text style={{ color: theme.palette.text.default }}>
                      {enterprise.location || ''}
                    </Text>
                  </View>
                )}
                onPress={enterprise.id && (() => handleItemPress(enterprise.id, navigation))}
              />
            </Card>
          );
        })}
      </View>
    </ScrollView>
  );
}

在我的示例中，我有三个企业，但在结果中只有第一个是显而易见的。但是，地图功能应该迭代我的数组？

谢谢！

Answer 1

map函数返回具有其操作结果的新数组。

mdn文档：

map（）方法创建一个新数组，其结果是在调用数组中的每个元素上调用提供的函数。

您可以使用FlatList组件从map函数中渲染产生的数组。

这是您如何执行此操作的示例（假设您不需要更改enterprises数据）：

renderCard = (enterprise) => {
    return (
        <Card key={enterprise.id} containerStyle={{ width: Dimensions.get('window').width - 50 }}>
            <ListItem
                title={enterprise.name}
                subtitle={(
                    <View>
                        <Text style={{ color: theme.text.default }}>
                            {enterprise.fonction}
                        </Text>
                        <Text style={{ color: theme.palette.text.default }}>
                            {enterprise.location || ''}
                        </Text>
                    </View>
                )}
                onPress={enterprise.id && (() => handleItemPress(enterprise.id, navigation))}
            />
        </Card>
    );
}
getCompanyFunction() 
  const { enterprises, navigation } = this.props;
  return (
    <ScrollView horizontal>
      <View style={{ display: 'flex', flexDirection: 'row', flexWrap: 'nowrap' }}>
        <FlatList
        data={enterprises}
        renderItem={({ item }) => renderCard(item)} />
      </View>
    </ScrollView>
  );
}

您不一定需要使用组件来渲染组件列表，但这通常是这样做的最佳行动。