React Component: оператор if if не обновляется внутри оператора return

Question

Я новичок в React и довольно новый впереди.

Я пытаюсь изменить цвет свойства "заливка" (в многоугольнике) в React. Если по c> 50 я хочу, чтобы результат был зеленым, а в остальном красным.

Я написал оператор "если еще", но цвет не отображается.

Я проверил это Можно ли использовать оператор Re ... else ... в React? Функция рендеринга? и другие источники онлайн / То, что я хочу сделать, кажется возможным, и я не знаю, почему это не рендеринг.

import React, { Component } from 'react';

class SvgStationIconGauge extends Component {
  render() {
    const { perc } = this.props || 0;
    const color_fill = 0;
    if (perc >50) {
      color_fill = "#ff0000";
    } else {
      color_fill = "#00ff00";
    }
    return (
      <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 50 120" className="icon-station">
        <title>Station name</title>
        <desc>Marker with gauge to display availability </desc>
     //#Here is what i am trying to render!!
        <polygon points="2 2 48 2 48 80 25 118 2 80" stroke="#333333" strokeWidth="4" fill= {color_fill} />
        <clipPath id="fill-icon">
          <polygon points="4 4 46 4 46 80 25 116 4 80 " strokeWidth="1" />
        </clipPath>
        <g clipPath="url(#fill-icon)">
          <rect width="100%" height={perc} fill="white" />
        </g>
      </svg>
    );
  }
}

export default SvgStationIconGauge;

Как уже упоминалось, я новичок в React, и любые замечания или предложения будут приветствоваться!

Answer 1

Вы не можете изменить const. используйте let

let color_fill = 0;
    if (perc >50) {
      color_fill = "#ff0000";
    } else {
      color_fill = "#00ff00";
    }

Answer 2

Нельзя переназначить значение const. Либо сделайте colour_fill a let, либо попробуйте:

const color_fill = perc >50 ? "#ff0000" : "#00ff00";