如何在JSX内联三元表达式中添加值为0时不显示图标的逻辑？

你可以通过嵌套三元表达式或者提取变量结合逻辑与运算符来实现需求，既精准控制图标显示，又能优化代码效率：

方法一：嵌套三元表达式 #

在原有逻辑外层增加一层判断，当返回值不等于0时才渲染对应图标，等于0时返回null（React中返回null不会渲染任何内容）：

<View style={{justifyContent: 'center'}}>
  {returnDayPercentageChange() !== 0 ? (
    returnDayPercentageChange() > 0 ? (
      <Icon
        style={{color: '#1CDC93', marginTop: 3}}
        name="caretup"
        size={10}
      />
    ) : (
      <Icon
        style={{color: '#FF6767', marginTop: 3}}
        name="caretdown"
        size={10}
      />
    )
  ) : null}
</View>

方法二：提取变量+逻辑与运算符（推荐） #

先把函数返回值存到变量里，避免重复调用函数，再用&&实现“条件满足才渲染”的逻辑，代码更简洁高效：

// 先在组件内部定义变量，存储百分比变化值
const dayPercentageChange = returnDayPercentageChange();

// 然后在JSX中使用
<View style={{justifyContent: 'center'}}>
  {dayPercentageChange !== 0 && (
    <Icon
      style={{color: dayPercentageChange > 0 ? '#1CDC93' : '#FF6767', marginTop: 3}}
      name={dayPercentageChange > 0 ? "caretup" : "caretdown"}
      size={10}
    />
  )}
</View>

原理说明：在React的JSX中，&&运算符会先判断左侧条件，若为false（比如值等于0时），则直接返回false，React会忽略这个值不渲染任何内容；若左侧为true，则渲染右侧的图标组件。

内容的提问来源于stack exchange，提问作者Daniel Döbereiner