如何在React Native中進行條件渲染

Question

如何在超過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看起來像這樣 。 我想在每個條件下填充一些UI。 這意味着if status = 1 && work_type ="plumber"則呈現一些UI。 同樣， if status = 2 && work_type="electrical" && assigend_to="worker_45"則呈現一些ui。 那么我該怎么做呢？

請幫忙

Answer 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>)
   }
}

這樣對我來說更干凈一點。