javascript - 如何使用状态和对象键的值在React中动态设置样式？(How do I use state and the value of an object's keys to dynamically style in React?)

Question

Im using CRA and Axios here, the code will be included.

(我在这里使用CRA和Axios，将包含代码。)

Problem: I want to make a stock chart, a very basic one.

(问题：我想制作一个非常基本的股票图表。)

it should function as such, on load component mounts and axios makes a call to the static api (for now) to populate the chart of exchange rates.

(它应具有这种功能，在装载组件时，axios会调用静态api（目前）以填充汇率图表。)

as a basic learning point for me to dive deeper im stuck on how to use the value of each key in the object to make it red if its worht less than a usd and green if its worth more.

(作为我更深入研究的基本学习点，我坚持要如何使用对象中每个键的值使它的价值小于一美元时变成红色，如果其价值大于一美元则变成绿色。)

I know how to refer to the styling in line but dont know how to access the value of the keys in state setting context.. thanks postman response from api looks like such and populates in the container properly

(我知道如何在行中引用样式，但不知道如何在状态设置上下文中访问键的值。.谢谢来自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"
}

React code

(反应代码)

import React, { Component } from "react";
import {Link} from "react-router-dom";
import './currency.css';
import { Container, Row, Col } from 'reactstrap';
import axios from'axios'



class Currency extends Component {
    constructor(props){
        super(props);
        this.state = {
            subject: "react state",
            instructor: "Lukas",
            purpose: "to make stacks",
            data: {},
            isGreater: false,
            isLess: false,
            isSpecial: false
            // queryUrl: "https://api.exchangeratesapi.io/latest?base=USD"
        };
    }
    componentDidMount(){
        axios.get('https://api.exchangeratesapi.io/latest?base=USD')
            .then(response => {
                if (response.data.rates.hasSpecialStuff) {
                    this.setState({
                        data: response.data.rates,
                        isSpecial: true
                    })
                }
                this.setState({
                    data: response.data.rates
                })
            })
    }

    render() {
        return (
            <div>
                <Container>
                    <div id="ratesDiv">
                         <h2> Current Exchange Rates</h2>
                        {Object.keys(this.state.data).map(key => <p className={'rateP'} style={this.state.isSpecial ? {backgroundColor: "red"} : {backgroundColor: "transparent"}}>{`${key}, ${this.state.data[key]}`}</p>)}
                    </div>
                </Container>



            </div>

        );
    }
}

export default Currency;

  ask by Lukas Simianer translate from so

Answer 1

According to your code isSpecial should remain always either true or false , so my understanding is that it shouldn't be part of the condition to make everything red or transparent rather you should focus on USD which is also your requirement too.

(根据您的代码， isSpecial始终应为true或false ，因此我的理解是，使所有内容变为红色或透明不应该成为条件的一部分，而是您应将重点放在USD上，这也是您的要求。)

You can try this following code:

(您可以尝试以下代码：)

     {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>
      ))}