Проверьте, является ли значение отрицательным, и примените CSS в React JS
Я работаю над веб-сайтом ReactJS, где я извлекаю цены из API, используя Axios. Теперь, когда я сделал это успешно, я ищу способ показать, положительный ли процент изменений за 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>
);
}
}
Как я могу этого добиться?
что-то вроде этого должно работать: <div style = {{color: this.props.data.priceChangePercent > 0? "зеленый" : "красный"}}>
функция fix_value(текст,к) {возврат (текст/100*100).toFixed(к).toString()}
вау, это сработало, спасибо!
Ответы 4
вы можете использовать метод Мат.знак(), чтобы проверить, является ли число отрицательным или положительным, а затем использовать возвращаемое значение в операторе if, который реализует условный рендеринг.
Вот самый простой пример использования встроенного style реквизита:
<p style = {{
color: someNumber < 0 ? "red" : "green"
}}>
{someNumber}
</p>
Есть «лучшие» способы в зависимости от вашей ситуации, например. используя имена классов, стилизованные компоненты и т. д., но это зависит от вашей среды и используемых библиотек/фреймворков.
<div style = {{color: this.props.data.priceChangePercent > 0 ? "зеленый" : "красный"}}> это сработало отлично!
Я предполагаю, что вам нужно показать значение «процент» в цвете. Затем попробуйте отредактировать свой код следующим образом:
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>
);
}
}
<div style = {{color: this.props.data.priceChangePercent > 0 ? "зеленый" : "красный"}}> это сработало отлично!
Вместо использования встроенного стиля вы можете определить класс css и использовать его, используя
<p className = {condition ? 'red' : 'green'}>Value</p>
добавьте свой код ответа json и код функции fix_value