检查值是否为负并在React JS中应用CSS

Question

我正在ReactJS网站上工作，我使用Axios从API中提取价格。既然我成功了，我正在寻找一种方法来显示24小时变化百分比是否为正，如果其负红色则会显示绿色。我的班级看起来像这样。

class BtcTicker extends Component {
  render() {
    return (
      <div>
        <p>{fix_value(this.props.data.lastPrice, 2)} USDT</p>
        <p>{fix_value(this.props.data.priceChangePercent, 2)}%</p>
      </div>
    );
  }
}

我怎样才能做到这一点？

Answer 1

我假设您必须在颜色中显示“百分比”值。然后尝试编辑您的代码，如下所示：

class BtcTicker extends Component {
  render() {
    return (
      <div>
        <p>{fix_value(this.props.data.lastPrice, 2)} USDT</p>
        <p style={{color: Math.sign(this.props.data.priceChangePercent) === -1 ? "red" : "green";}}>{fix_value(this.props.data.priceChangePercent, 2)}%</p>
      </div>
    );
  }
}

Answer 2

您可以使用Math.sign()方法检查数字是负数还是正数，然后在实现条件呈现的if语句中使用返回值。

Answer 3

这是使用内联style道具的最简单的例子：

<p style={{
  color: someNumber < 0 ? "red" : "green"
}}>
  {someNumber}
</p>

根据您的情况，有“更好”的方式，例如使用类名，样式组件等 - 但这取决于您的环境以及您正在使用的库/框架。

Answer 4

您可以使用<p className={condition ? 'red' : 'green'}>Value</p>定义css类而不是使用内联样式