在数组映射中反应本机if-else条件

Question

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

我创建了一个组件，通过它我可以显示用户选择的首发球员。我能够循环包含播放器的数组，并在应用程序启动后正确显示它们。

然而，在循环中，我需要插入一个if…else if。。。其他结构，因为我必须根据球员的位置(守门员、后卫、中场、攻击手(向他们展示。

我在网上读了一些指南，在stack上也读了一些帖子，然后试图将条件结构放入我的组件中，但当我运行应用程序时，我收到了以下错误：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

在返回语句中不能有这样的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移动到map函数内的顶部元素。