在数组映射中反应原生 if else 条件

Question

我是使用 React-Native 开发的新手，我正在为梦幻足球游戏开发一个小型应用程序。

我创建了一个组件，通过它我可以显示用户选择的起始玩家。 一旦应用程序启动，我就能够循环包含播放器的数组并正确显示它们。

但是，在循环中，我需要插入一个 if..else if ... else 构造，因为我必须根据球员的位置（守门员、后卫、中场、前锋）显示球员。

我已经阅读了一些在线指南，以及堆栈上的一些帖子，然后尝试将条件构造放入我的组件中，但是当我运行应用程序时，我收到以下错误：Component Exception: Text strings must be rendered with a <Text> component 。

我不知道他为什么要这样做，错误是什么……您有什么建议或建议吗？

我的组件：

import React from 'react';
import {View, ScrollView, StyleSheet, Dimensionens, ImageBackground, Text} from 'react-native';
import { Entypo } from '@expo/vector-icons';
import HeaderComponent from '../commoncomponents/HeaderComponent';
import { List } from 'react-native-paper';

const FormazioneDetail2 = () => {
    //dichiariamo nome, cognome e posizione del giocatore
    const title = <View><Text>Nome {'\n'}Cognome {'\n'}GK </Text></View>;
    const player = [
        {
            key: '1',
            posizione: 'P',
            name: 'Donnarumma',
        },
        {
            key: '2',
            posizione: 'D',
            name: 'Bonucci',
        },
        {
            key: '3',
            posizione: 'D',
            name: 'Chiellini',
        },
        {
            key: '4',
            posizione: 'D',
            name: 'Bastoni',
        },
        {
            key: '5',
            posizione: 'C',
            name: 'Barella',
        },
        {
            key: '6',
            posizione: 'C',
            name: 'Jorjino',
        },
        {
            key: '7',
            posizione: 'C',
            name: 'Verratti',
        },
        {
            key: '8',
            posizione: 'C',
            name: 'Locatelli',
        },
        {
            key: '9',
            posizione: 'A',
            name: 'Insigne',
        },
        {
            key: '10',
            posizione: 'A',
            name: 'Immobile',
        },
        {
            key: '11',
            posizione: 'A',
            name: 'Berardi',
        }
    ]; 
    
    //ciclo per mostrare l'array di calciatori
    const list = () => {
        
        return player.map((element) => {
            return (
                <View style={styles.centeredView}>
                    <View style={styles.modalView}>
                        if(element.posizione == 'P'){
                            <View key={element.key}>
                            <Text style={{flex:5, marginTop: 5, alignItems: 'flex-end', flexDirection: 'row'}}>{element.name}: {element.posizione}</Text>
                            </View>
                        }else if(element.posizione == 'D'){
                            <View key={element.key}>
                            <Text style={{flex:5, marginTop: 10, alignItems: 'flex-end', flexDirection: 'row'}}>{element.name}: {element.posizione}</Text>
                            </View>
                        }else if(element.posizione == 'C'){
                            <View key={element.key}>
                            <Text style={{flex:5, marginTop: 15, alignItems: 'flex-end', flexDirection: 'row'}}>{element.name}: {element.posizione}</Text>
                            </View>
                        }else{
                            <View key={element.key}>
                            <Text style={{flex:5, marginTop: 20, alignItems: 'flex-end', flexDirection: 'row'}}>{element.name}: {element.posizione}</Text>
                            </View>
                        }
                                    
                    </View>
                </View>
            );
        });  
    };

    return (
            <View>
                <Text style={styles.screenTitle}>Formazione inserita</Text>
                <View>{list()}</View>
            </View>
            );
};

const styles = StyleSheet.create({

});

export default FormazioneDetail2;

Answer 1

你的 return 语句中不能有这样的 if 语句。

你可以做这样的 if 语句：

return (
  <div>
    {a === b ? <Text>A is equal to B</Text> : <Text>A is not equal to B</Text>}
  </div>
)

但在这种情况下，我建议将 if 语句提取到它自己的函数中，如下所示：

const getTextElement = (element) => {
  if (element.posizione === 'P') {
    return <Text style={{flex: 5, marginTop: 5, alignItems: 'flex-end', flexDirection: 'row'}}>{element.name}: {element.posizione}</Text>;
  } else if (element.posizione === 'D') {
    return <Text style={{flex: 5, marginTop: 10, alignItems: 'flex-end', flexDirection: 'row'}}>{element.name}: {element.posizione}</Text>;
  } else if (element.posizione === 'C') {
    return <Text style={{flex: 5, marginTop: 15, alignItems: 'flex-end', flexDirection: 'row'}}>{element.name}: {element.posizione}</Text>;
  } else {
    return <Text style={{flex: 5, marginTop: 20, alignItems: 'flex-end', flexDirection: 'row'}}>{element.name}: {element.posizione}</Text>;
  }
};

const list = () => {
  return player.map((element) => {
    const textElement = getTextElement(element)

    return (
      <View key={element.key} style={styles.centeredView}>
        <View style={styles.modalView}>
          <View>
            {textElement}
          </View>
        </View>
      </View>
    );
  });
};

我还将key 移动到地图函数内的顶部元素。