Question

我在这里使用CRA和Axios，将包含代码。问题：我想制作一个非常基本的股票图表。它应具有这种功能，在装载组件时，axios会调用静态api（目前）以填充汇率图表。作为我更深入研究的基本学习点，我坚持要如何使用对象中每个键的值使它的价值小于一美元时变成红色，如果其价值大于一美元则变成绿色。我知道如何引用样式，但是不知道如何在状态设置上下文中访问键的值。 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 } 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;

Answer 1

根据您的代码 isSpecial 应该始终保持 true 或 false ，因此我的理解是，使所有内容变为红色或透明不应该成为条件的一部分，而应该关注美元，这也是您的要求。您可以尝试以下代码：

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

Answer 2

我们可以将样式设置如下

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

如何使用状态和对象键的值在React中动态设置样式？

2 个答案: