如何根據reactjs中的值更改段落中的背景顏色

Question

我想通過檢查{this.state.list[0].main.temp} > 10 本段的背景顏色是否為黃色來更改背景顏色..

代碼：

const getBackground = (temperature) => {
    if(temperature > 30) return "red"
    if(temperature > 20) return "orange"
    if(temperature > 10) return "yellow"
    return "transparent"
  }
  
  renderForecast1 = () => {
    if (this.state && this.state.list) {
      const list = this.state.list[0];
      return (
        <p style={{ backgroundColor: getBackground(list.main.temp) }}>
          Date: {list.dt_txt}h <br />
          Temperature: {list.main.temp} °C <br />
          Chance of precipitation: {list.pop} mm <br />
          Wind Speed: {Math.round(list.wind.speed, 1) * 3.6} km/h <br />
          Pressure: {list.main.pressure} hPa <br />
          Humidity: {list.main.humidity} %
        </p>
      );
    }
  };

我收到錯誤：

 SyntaxError: C:\Users\Admin\Desktop\weather\weather\src\App.js: Unexpected token (86:8)

  84 |   };
  85 |
> 86 |   const getBackground = (temperature) => {
     |         ^
  87 |     if(temperature > 30) return "red"
  88 |     if(temperature > 20) return "orange"
  89 |     if(temperature > 10) return "yellow"

怎么做 ？

我使用<div className='row' style={{ fontSize: "15px" }}>{this.renderForecast1()}</div>來顯示數據..

Answer 1

它不是有效的 Javascript 語法，您將函數編寫為類成員的一部分。 刪除const並通過this.調用它this.

getBackground = (temperature) => {
  ...
};

renderForecast1 = () => {
  if (this.state && this.state.list) {
    const list = this.state.list[0];
    return (
      <p style={{ backgroundColor: this.getBackground(list.main.temp) }}>
        ...
      </p>
    );
  }
};