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

大佬教程收集整理的这篇文章主要介绍了在数组映射中反应原生 if else 条件，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

如何解决在数组映射中反应原生 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',name: 'ChIEllini',{
            key: '4',name: 'Bastoni',{
            key: '5',posizione: 'C',name: 'barella',{
            key: '6',name: 'Jorjino',{
            key: '7',name: 'Verratti',{
            key: '8',name: 'Locatelli',{
            key: '9',posizione: 'A',name: 'Insigne',{
            key: '10',name: 'Immobile',{
            key: '11',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,flexDirection: 'row'}}>{element.namE}: {element.posizionE}</Text>
                            </VIEw>
                        }else if(element.posizione == 'C'){
                            <VIEw key={element.key}>
                            <Text style={{flex:5,margintop: 15,flexDirection: 'row'}}>{element.namE}: {element.posizionE}</Text>
                            </VIEw>
                        }else{
                            <VIEw key={element.key}>
                            <Text style={{flex:5,margintop: 20,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 (
  <div>
    {a === b ? <Text>A is equal to B</Text> : <Text>A is not equal to B</Text>}
  </div>
)

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,flexDirection: 'row'}}>{element.namE}: {element.posizionE}</Text>;
  } else if (element.posizione === 'C') {
    return <Text style={{flex: 5,marginTop: 15,flexDirection: 'row'}}>{element.namE}: {element.posizionE}</Text>;
  } else {
    return <Text style={{flex: 5,marginTop: 20,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>
    );
  });
};

大佬总结

以上是大佬教程为你收集整理的在数组映射中反应原生 if else 条件全部内容，希望文章能够帮你解决在数组映射中反应原生 if else 条件所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。