Javascript 如何使用对象的状态和值'；在React中动态设置样式的关键点是什么？

我在这里使用CRA和Axios，代码将包括在内。 问题：我想制作一张股票图表，一张非常基本的图表。它的功能应该是这样的：加载组件安装，axios调用静态api（目前）来填充汇率图表。作为我深入研究的一个基本学习点，我专注于如何使用对象中每个键的值，如果其值小于1美元，则使其变为红色，如果其值大于1美元，则使其变为绿色。我知道如何在行中引用样式，但不知道如何在状态设置上下文中访问键的值。。谢谢 来自api的邮递员响应看起来像这样，并正确地填充到容器中

{
    "base": "USD",
    "rates": {
        "GBP": 0.7775366251,
        "HKD": 7.8246518358,
        "IDR": 14084.997287032,
        "ILS": 3.4664496292,
        "DKK": 6.7577319588,
        "INR": 71.6865617652,
        "CHF": 0.994212335,
        "MXN": 19.3951890034,
        "CZK": 23.0719840839,
        "SGD": 1.3629951167,
        "THB": 30.1953336951,
        "HRK": 6.7249954784,
        "EUR": 0.9043226623,
        "MYR": 4.1710074154,
        "NOK": 9.1411647676,
        "CNY": 7.0387050099,
        "BGN": 1.768674263,
        "PHP": 50.8545849159,
        "PLN": 3.8865075059,
        "ZAR": 14.7149574968,
        "CAD": 1.327455236,
        "ISK": 123.259178875,
        "BRL": 4.188189546,
        "RON": 4.3173268222,
        "NZD": 1.5586905408,
        "TRY": 5.7079942123,
        "JPY": 108.545849159,
        "RUB": 63.6969614759,
        "KRW": 1178.395731597,
        "USD": 1.0,
        "AUD": 1.4728703201,
        "HUF": 302.3060227889,
        "SEK": 9.6097847712
    },
    "date": "2019-11-22"
}

反应码

import React，{Component}来自“React”；
从“react router dom”导入{Link}；
导入“/currency.css”；
从“reactstrap”导入{Container，Row，Col}；
从“axios”导入axios
类货币扩展组件{
建造师（道具）{
超级（道具）；
此.state={
主题：“反应状态”，
讲师：“卢卡斯”，
目的：“制作堆叠”，
数据：{}，
isGreater:错，
艾利斯：错，
特别是：错
//queryUrl:“https://api.exchangeratesapi.io/latest?base=USD"
};
}
componentDidMount（）{
axios.get（）https://api.exchangeratesapi.io/latest?base=USD')
。然后（响应=>{
if（响应、数据、费率、特殊材料）{
这是我的国家({
数据：响应。数据。速率，
是的
})
}
这是我的国家({
数据：响应、数据、速率
})
})
}
render（）{
返回(
现行汇率
{Object.keys（this.state.data）.map（key=>
{${key}，${this.state.data[key]}}
）
);
}
}
出口默认货币；

根据您的代码

是特殊的

应该始终保持

正确

或

错误

，因此我的理解是，让所有东西都变成红色或透明不应该是条件的一部分，而您应该关注美元，这也是您的要求。您可以尝试以下代码：

     {Object.keys(this.state.data).map((key, i) => (
        <p
          key={i}
          className={"rateP"}
          style={
            parseFloat(this.state.data[key]) <
            parseFloat(this.state.data["USD"])
              ? { backgroundColor: "red" }
              : { backgroundColor: "transparent" }
          }
        >{`${key}, ${this.state.data[key]}`}</p>
      ))}

{Object.keys（this.state.data）.map（（key，i）=>(
{`${key}，${this.state.data[key]}
))}

我们可以如下设置样式

  {Object.keys(this.state.data).map(s =>
            <p
              style={this.state.data[s] > 1 ?
                { backgroundColor: 'green' } : { backgroundColor: 'red' }
              }>
              {s}, {this.state.data[s]}
            </p>)}

{Object.keys（this.state.data）.map（s=>
1？
{backgroundColor:'绿色'}:{backgroundColor:'红色'}
}>
{s} ，{this.state.data[s]}
）}

什么是

.hasSpecialStuff

属性，它不在数据中，不确定它指的是什么。另外，在呈现它时，为什么不使用该值作为样式的条件检查，即，不使用

this.state.isSpecial？..

只使用

Number（this.state.data[key]）<1？..