React中如何为<img>标签的src属性添加多条件判断？

你可以通过三元运算符实现多条件判断，或者提前提取变量优化代码可读性，以下是两种可行方案：

方案一：直接在src属性中使用嵌套三元运算符 #

<img 
  className='ArrowIcon' 
  src={
    data?.quote_data[0]?.change < 0 ? arrowdown : 
    data?.quote_data[0]?.change > 0 ? arrowup : 
    null // 如果change等于0或数据未加载时，可替换为你需要的默认图标
  }
/>

这里用可选链?.避免data或quote_data未定义时的报错：先判断change小于0时显示arrowdown，否则判断大于0时显示arrowup，剩下的情况（等于0或数据未就绪）可设置默认图标或null。

方案二：提前提取变量优化可读性 #

如果后续逻辑可能扩展，建议先在组件内处理图标逻辑，再渲染：

// 先获取change值，加可选链防止报错
const changeValue = data?.quote_data[0]?.change;
// 根据change值确定图标
const arrowIcon = changeValue < 0 ? arrowdown : changeValue > 0 ? arrowup : null;

// 渲染img
<img className='ArrowIcon' src={arrowIcon} />

这种方式把逻辑和渲染分离，代码更易维护，也方便后续调试。

内容的提问来源于stack exchange，提问作者codeCroissant11