React中如何根据price_change_percentage_24h值动态改变p标签颜色

你可以通过动态设置内联样式或者绑定条件类名两种方式实现需求，以下是具体修改：

方式一：内联样式直接判断 #

直接在显示涨跌幅的<p>标签里通过条件判断设置style属性，无需额外CSS：

修改CoinItem组件中对应代码：

// 替换原来的涨跌幅p标签
<p 
  style={{
    color: props.coins.price_change_percentage_24h > 0 ? 'green' : 
           props.coins.price_change_percentage_24h < 0 ? 'red' : 'gray'
  }}
>
  {props.coins.price_change_percentage_24h.toFixed(2)}%
</p>

方式二：通过CSS类名动态切换 #

先在Coins.css中添加样式类：

.price-green {
  color: #10b981; /* 可根据需求调整绿色色调 */
}

.price-red {
  color: #ef4444; /* 可根据需求调整红色色调 */
}

.price-neutral {
  color: #6b7280; /* 涨跌幅为0时的灰色 */
}

然后修改CoinItem组件的涨跌幅标签，根据数值绑定对应类名：

// 替换原来的涨跌幅p标签
<p 
  className={
    props.coins.price_change_percentage_24h > 0 ? 'price-green' :
    props.coins.price_change_percentage_24h < 0 ? 'price-red' : 'price-neutral'
  }
>
  {props.coins.price_change_percentage_24h.toFixed(2)}%
</p>

补充说明 #

• 若不需要处理涨跌幅为0的场景，可简化条件：直接判断大于0用绿色，其余情况用红色
• 两种方式都能实现需求，使用CSS类的方式更便于后续统一调整样式细节

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