[英]How to do conditional rendering using switch in react native?
您好我正在尝试在项目中执行switch语句。我有一个对象图像如下
export const images = [
{
image: BASE.URL + 'Images/Plumber.png',
},
{
image: BASE.URL + 'Images/electrician.png',
},
{
image: BASE.URL + 'Images/ac.png',
}
]
我从服务器获取工作人员列表并将其呈现在Card
因此服务器响应中仅包含工作人员的名称。我试图将图像与它们一起提供,因此我编写了switch语句,但是图像是不随文本一起出现。以下是我的代码。
import { images } from './data';
renderImage() {
const { workType } = this.state;
switch (workType) {
case 'Plumber':
return (
<Image style={{ height: 100, width: 100 }} source={{ uri: images[0].image }} />
);
case 'Electrician':
return (
<Image style={{ height: 100, width: 100 }} source={{ uri: images[1].image }} />
);
case 'AC'
return (
<Image style={{ height: 100, width: 100 }} source={{ uri: images[2].image }} />
);
}
}
render(){
const { workers,workType } = this.state;
return(
{workers.map((a, index) => (
<TouchableOpacity onPress={() => this.popUpDialog(a.id, a.work_type)}>
<Card>
{this.renderImage()}
<Text>{a.work_type}</Text>
</Card>
</TouchableOpacity>
))}
)
}
我做错了什么,请帮助我找到解决方案。谢谢!
我认为您忘记了返回映射的组件。
例如:
render() {
const { workers,workType } = this.state;
return(
{workers.map((a, index) => {
return(
<TouchableOpacity onPress={() => this.popUpDialog(a.id, a.work_type)}>
<Card>
{this.renderImage()}
<Text>{a.work_type}</Text>
</Card>
</TouchableOpacity>
)
})}
)
}
尝试console.log
您的this.state.workType
因为它可能不是您认为应该的值。 由于您没有default
大小写,因此该函数不返回任何内容。
另外,如果将workType
用作renderImage
函数的参数,则可能会更容易。 我怀疑你的this.state.workType
不会与你同a.work_type
在workers.map
功能。 你可以这样
const renderImage = (workType) => {
switch (workType) {
...
}
}
//and then
workers.map((a, index) => (
<TouchableOpacity onPress={() => this.popUpDialog(a.id, a.work_type)}>
<Card>
{this.renderImage(a.work_type)}
<Text>{a.work_type}</Text>
</Card>
</TouchableOpacity>
))
我的建议是去一张地图,然后按照以下方式渲染图像。
const WORKTYPE_TO_IMAGE = {
Plumber: BASE.URL + 'Images/Plumber.png',
Electrician: BASE.URL + 'Images/electrician.png',
AC: BASE.URL + 'Images/ac.png',
};
renderImage(){
return (
<Image style={{ height: 100, width: 100 }} source={WORKTYPE_TO_IMAGE[this.state.workType]} />
)
}
您曾经使用Image标签三次,但是现在只使用一次(因此遵循“不重复”原理)。 此外,我真的很讨厌在代码中使用if / switch,因为需求经常出现,而不是更改代码中的逻辑,您应该只在一个位置进行更改(在您的情况下这是一个常数)。 该代码将非常干净和简短:)
我只是将样式赋予主视图,然后一切正常。
renderImage(workType) {
switch (workType) {
case 0:
return (
<Image style={{ height: 100, width: 100, backgroundColor: 'green' }} />
);
case 1:
return (
<Image style={{ height: 100, width: 100, backgroundColor: 'yellow' }} />
);
case 2:
return (
<Image style={{ height: 100, width: 100, backgroundColor: 'blue' }} />
);
}
}
//source={{ uri: require('./1.jpg') }}
render() {
let workers = [{ work_type: 'Plumber' }, { work_type: 'Electrician' }, { work_type: 'AC' }];
return (
<View style={{ width: '100%', height: '100%', backgroundColor: 'red' }}>
{
workers.map((a, index) => (
<TouchableOpacity onPress={() => this.popUpDialog(a.id, a.work_type)}>
<View>
{this.renderImage(index)}
<Text>{a.work_type}</Text>
</View>
</TouchableOpacity>
))
}
</View>
)
}
我没有图像,所以设置了颜色。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.