[英]How to do conditional rendering in react native
How to do conditional rendering in react native with more than 1 condition? 如何在超过1个条件的本机反应中进行条件渲染?
Following is some portion of my code 以下是我的代码的一部分
Index 指数
.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>)}
But here it is for a single case means if responseData
contains only one field. 但是这里仅是一种情况,即
responseData
仅包含一个字段。 But now the reponseData contains 2 arrays. 但是现在reponseData包含2个数组。 Each with 3 objects.
每个都有3个对象。 So how do I check conditional rendering here?My responseData looks like this .
所以,我怎么在这里检查条件呈现?我responseData看起来像这样 。 I want to populate some UI on each condition.
我想在每个条件下填充一些UI。 That means
if status = 1 && work_type ="plumber"
then render some UI. 这意味着
if status = 1 && work_type ="plumber"
则呈现一些UI。 Also if status = 2 && work_type="electrical" && assigend_to="worker_45"
then render some ui. 同样,
if status = 2 && work_type="electrical" && assigend_to="worker_45"
则呈现一些ui。 So how do I do this? 那么我该怎么做呢?
Please help 请帮忙
You can move your render in a new variable, or function. 您可以将渲染移到新的变量或函数中。 to keep clear the
render
function 保持清晰的
render
功能
render() {
const { progressData }= this.state;
return(
<View style={{flex:1}}>
<HeaderExample />
<View>
{renderProgressData(progressData)}
... //rest of your code
)
}
and in your renderProgressData
function you can create a switch
在您的
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>)
}
}
It is a little cleaner in this way for me. 这样对我来说更干净一点。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.