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

【问题标题】：How do I use state and the value of an object's keys to dynamically style in React?如何使用状态和对象键的值在 React 中动态设置样式？
【发布时间】：2020-03-24 16:24:29
【问题描述】：

我在这里使用 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;

【问题讨论】：

.hasSpecialStuff 属性是什么，它不在数据中，不确定它指的是什么。另外，在渲染它时，为什么不直接使用该值作为样式的条件检查，即使用this.state.isSpecial ?... 而不是Number(this.state.data[key]) < 1 ?...

标签： javascript reactjs object axios

【解决方案1】：

我们可以如下设置样式

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

【讨论】：

【解决方案2】：

根据您的代码 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>
      ))}

【讨论】：