如何根据 Reactjs 中的条件动态应用颜色？

Question

 await REApiService.getCountryList().then((response: any) => {

    let countryList = response?.map((item: any) => {

      return {

        optionText: item.CountryName,

      };

    });

    setCountryData(countryList);

  });

Above is my country list API call, where it consists of many country names, followed by score for each of the country. and For each of the country, i want to apply the color based on the condition dynamically(using score). For example, Below is my sample array. {"Code":"AF","Country":"Afghanistan", "Score":3 },

Where if u look at the array,it has separate field called "Score" starting from "1,2,3,99" i want to apply color based on the score value. like if score value is

Answer 1

create an enum object with your color set (if you want specific values)

const colors = {
  1: 'red',
  2: 'orange'
  //...
}

and in the component where you render the markup apply dynamic styling

<h4 style={{ color: colors[Score] }}>{ Country }</h4>

a more dynamic approach would be to manipulate an HSL (hue, saturation, lightness) value, a simple example would be

<h4 style={{ color: `hsl(${ 360 / 100 * colors[Score], 100%, 50%)` }}>{ Country }</h4>

hue goes from red to red on a 360degree color span eg 0 = red, 120 = green, 240 = blue & 360 = red

Answer 2

Is this helpful for you?

const colors = {
  "1": "red",
  "2": "orange",
  "3": "purple",
  "99": "dark red",
}

await REApiService.getCountryList().then((response: any) => {
  let countryList = response?.map((item: any) => {
    return {
      optionText: item.CountryName,
      value: item.Country_shortcode,
      color: colors[item.score],
    };
  });
  setCountryData(countryList);
});

Then you can use color in inline styling.