Как сделать условный рендеринг в react native

Как сделать условный рендеринг в React Native с более чем 1 условием?

Ниже приводится некоторая часть моего кода.

Показатель

 .then(response => response.json())
          .then((responseData) => {
             this.setState({
           progressData:responseData,
          });
    .....
    ......
      render() {

        const { progressData }= this.state;
      return(
        <View style={{flex:1}}>
        <HeaderExample />
        <View>
         {progressData == "1"} 
               (<View>

                 <Text style={{fontSize:28,color:"#8470ff",fontWeight: 'bold',paddingTop:20,alignSelf:'center'}}>Pending</Text>

                </View>)}
{  progressData == "2" && 
           (<View>
             <CardSection>
             <Text style={{fontSize:28,color:"#8470ff",fontWeight: 'bold',paddingTop:20,alignSelf:'center'}}>InProgress </Text>

             <View style={styles.buttonContainer}>
             <Button
             title="Report"
             color="#8470ff"
             onPress={() =>onPressReport()}
             />

             </View>)}

Но здесь это для одного случая означает, что responseData содержит только одно поле. Но теперь reponseData содержит 2 массива. В каждом по 3 предмета. Итак, как мне проверить здесь условный рендеринг? Мои responseData выглядят как это. Я хочу заполнить пользовательский интерфейс для каждого условия. Это означает, что if status = 1 && work_type ="plumber" затем визуализирует некоторый пользовательский интерфейс. Также if status = 2 && work_type="electrical" && assigend_to="worker_45" затем визуализирует некоторый ui. Так как мне это сделать?

Пожалуйста помоги

Попробуйте condition ? <MyComponent /> : null вместо condition && <MyComponent />

Tholle 31.10.2018 12:46

Итак, как мне отобразить здесь каждый элемент?

Linu Sherin 31.10.2018 12:49

Почему вы хотите нанести карту? Как именно?

oma 31.10.2018 12:53
1
3
3 267
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вы можете переместить свой рендер в новую переменную или функцию. чтобы очистить функцию render

 render() {

        const { progressData }= this.state;
      return(
        <View style={{flex:1}}>
        <HeaderExample />
        <View>
        {renderProgressData(progressData)}
        ... //rest of your code
      )
  }

и в вашей функции renderProgressData вы можете создать switch

renderProgressData = (progress) => {
   switch(progress) {
    case 1:
        return (<View>1</View>)
    case 2:
         return (<View>1</View>)
    // ...  and so on
    default:
        return (<View>Default View</View>)
   }
}

Для меня это немного чище.

Другие вопросы по теме