Question

我正在尝试弄清楚如何更改数字的颜色。问题是我正在使用React.js构建一个应用程序，该应用程序使用外汇API来显示每种货币汇率的值，所以我试图弄清楚如果数字增加，如何将其更改为绿色，如果数字增加，则保持不变相同的值，如果数字减少则为红色。颜色应仅显示一秒钟。问题在于它的Javascript以及如何更改颜色。感谢您的帮助。

import React, { Component } from "react";
import React, { Component } from "react";
import axios from "axios";
import Infocard2 from "./infocard2";
import Forexcard from "./forexcard";

export default class Forexdata extends Component {
state = {
time: "",
NGN: "",
EUR: "",
CNH: "",
JPY: "",
GBP: "",
AUD: "",
CAD: "",
CHF: "",
SEK: "",
NZD: ""
  };

  componentDidMount() {
    this.api_call();
    setInterval(api_call(), 30000);
  }

  api_call = () => {
    axios.get(`https://cors-anywhere.herokuapp.com/https://www.freeforexapi.com/api/live?pairs=USDNGN,USDEUR,USDCNH,USDJPY,USDGBP,USDAUD,USDCAD,USDCHF,USDSEK,USDNZD`
  ).then(res => {
          this.setState({
          time: res.headers.date,
          NGN: res.data.rates.USDNGN.rate,
          EUR: res.data.rates.USDEUR.rate,
          CNH: res.data.rates.USDCNH.rate,
          JPY: res.data.rates.USDJPY.rate,
          GBP: res.data.rates.USDGBP.rate,
          AUD: res.data.rates.USDAUD.rate,
          CAD: res.data.rates.USDCAD.rate,
          CHF: res.data.rates.USDCHF.rate,
          SEK: res.data.rates.USDSEK.rate,
          NZD: res.data.rates.USDNZD.rate
        });
        console.log(res);
      })
      .catch(error => {
        console.log(error);
      });
  };

  render() {
    return (
      <div>
        <Infocard2 time={this.state.time} />
        <Forexcard
          NGN={this.state.NGN}
          EUR={this.state.EUR}
          CNH={this.state.CNH}
          JPY={this.state.JPY}
          GBP={this.state.GBP}
          AUD={this.state.AUD}
          CAD={this.state.CAD}
          CHF={this.state.CHF}
          SEK={this.state.SEK}
          NZD={this.state.NZD}
        />
      </div>
    );
  }
}

这是主要部分。另一个组成部分仅包含

标记，用于显示道具的数据

值更改时更改外汇API编号的颜色

0 个答案: