Javascript 如何在react native中使用开关进行条件渲染？

您好，我正在尝试在我的项目中执行switch语句

export const images = [
  {
    image: BASE.URL + 'Images/Plumber.png',

  },
  {
    image: BASE.URL + 'Images/electrician.png',


  },
 {
    image: BASE.URL + 'Images/ac.png',

  }
]

我正在从服务器获取工作人员列表，并将其呈现在

卡中

。因此，服务器响应仅包含工作人员的名称。我尝试将图像与它们一起提供。因此，我编写了一个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>
              ))}
    )
    }

从“/data”导入{images}；
渲染（）{
const{workType}=this.state；
开关（工作类型）{
“水管工”案例：
返回(
);
案例“电工”：
返回(
);
案例“AC”
返回(
);
}
}
render（）{
const{workers，workType}=this.state；
返回(
{workers.map（（a，索引）=>(
this.popUpDialog（a.id，a.work\u type）}>
{this.renderImage（）}
{a.work_type}
))}
)
}

---

我做错了什么，请帮我找到解决办法。谢谢

我的建议是选择一张地图，然后按照以下方式渲染图像

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]} />
  )
}

const WORKTYPE\u TO\u IMAGE={
水管工：BASE.URL+'Images/Plumber.png'，
电工：BASE.URL+'Images/Electrician.png'，
AC:BASE.URL+'Images/AC.png'，
};
渲染（）{
返回(
)
}

---

您曾三次使用图像标记，但现在只使用一次（因此遵循“请勿重复”原则）。此外，我真的很讨厌我的代码中的if/switch，因为需求经常改变，而不是改变代码中的逻辑，你应该只在一个地方改变（在你的例子中这是一个常量）。代码将非常简洁：）

我想您忘记返回映射组件了

例如：

render（）{
const{workers，workType}=this.state；
返回(
{workers.map（（a，索引）=>{
返回(
this.popUpDialog（a.id，a.work\u type）}>
{this.renderImage（）}
{a.work_type}
)
})}
)
}

我只是给主视图添加了样式，然后一切都正常了

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

渲染（工作类型）{
开关（工作类型）{
案例0：
返回(
);
案例1：
返回(
);
案例2：
返回(
);
}
}
//source={{uri:require（'./1.jpg'）}
render（）{
让工人=[{工作类型：'水管工'}，{工作类型：'电工'}，{工作类型：'交流电'}]；
返回(
{
workers.map（（a，索引）=>(
this.popUpDialog（a.id，a.work\u type）}>
{this.renderImage（索引）}
{a.work_type}
))
}
)
}

---

我已经设置了颜色，因为我没有图像

尝试

console.log

您的

this.state.workType

，因为它可能不是您认为应该的值。由于没有默认的大小写，因此函数不返回任何内容

此外，如果您将

工作类型

作为

渲染

函数的参数，则会更容易。我怀疑您的

this.state.workType

与

workers.map

功能中的

a.work\u type

不一样。你可以这样做

const renderImage=（工作类型）=>{
开关（工作类型）{
...
}
}
//然后
workers.map（（a，索引）=>(
this.popUpDialog（a.id，a.work\u type）}>
{this.renderImage（a.work_type）}
{a.work_type}
))

那么我是否需要为

工作类型_到_图像

编写一个映射方法？不，它只是所有工作类型图像URL的包装器对象，将来您可以使用它作为声明性呈现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>
    )
  }