Javascript React组件：“if-else”语句未在return语句内更新

我在React是个新手，前面很新

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

我写了一个if-else语句，但是没有颜色渲染

我已经在线查看了这个和其他来源/我想做的似乎是可能的，我不知道为什么它没有渲染

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的noob，欢迎任何观察或建议

你不能改变常数。使用let

你不能改变常数。使用let

不能重新分配常量值。让颜色填充或尝试：

常量颜色填充=perc>50？ff0000:00ff00

不能重新分配常量值。让颜色填充或尝试：

常量颜色填充=perc>50？ff0000:00ff00

使用const{perc=0}=this.props；而不是const{perc}=this.props|124; 0；使用常量颜色填充=perc>50？ff0000:00ff00而不是ifChange const fill_color，让fill_color使用const{perc=0}=this.props；而不是const{perc}=this.props|124; 0；使用常量颜色填充=perc>50？ff0000:00ff00而不是ifChange const fill_color以允许fill_color无论如何，vscode或任何编辑器将抛出编译时错误无论如何，vscode或任何编辑器将抛出编译时错误

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