如何在具有多于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看起来像this。我想在每种情况下填充一些UI。这意味着if status = 1 && work_type ="plumber"
然后呈现一些UI。然后if status = 2 && work_type="electrical" && assigend_to="worker_45"
然后呈现一些ui。那我该怎么做?
请帮忙
您可以在新变量或函数中移动渲染。保持清楚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>)
}
}
这对我来说有点干净。