reactjs - 在数组映射中反应原生 if else 条件
问题描述
我是使用 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;
解决方案
你的 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
到 map 函数内的顶部元素。
推荐阅读
- javascript - 查找 Number 是否在两个数字之间
- node.js - 如何在 LoopBack 4 中的所有网络接口上启动 HTTP Server
- javascript - 无法使用 jQuery 验证器验证动态输入?
- swift - 关于比较和生成字符串
- c# - 无法在两个同级容器之间进行通信
- r - 用相同类型的NA填充列的函数
- docker - 是否可以使用 docker 作为 golang 应用引擎标准环境的开发环境?
- javascript - 如何用 html 替换窗口并同时更改位置,以便 html 中的资产能够正确加载?
- javascript - flexslider 多个图像滑块(轮播)。需要页数,例如 1 of 2、2 of 2
- php - 使用 PHP 和 MySQL 获取数据以获取折线图