React Component：“ if else”语句未在return语句内更新

Question

我是React的菜鸟，前面是个新手。

我正在尝试在React中更改属性“填充”（在多边形中）的颜色。如果perc> 50，我希望结果为绿色，否则为红色。

我写了一个“ if else”语句，但是没有呈现颜色。

我已经在线检查了此Is it possible to use if...else... statement in React render function?和其他资源/我想做的事情似乎是可能的，而且我不知道为什么它没有呈现。

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设为let或尝试：

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