Question

我正在开发一个简单的应用程序，背景颜色应根据季节而有所不同。到目前为止，我已经写过：

class App extends React.Component {
  constructor() {
    super();
    this.state = {
        backgroundColor: 'blue'
    }
  }

    handleSeason = (time) => {
    const months = [
      'January',
      'February',
      'March',
      'April',
      'May',
      'June',
      'July',
      'August',
      'September',
      'October',
      'November',
      'December',
    ]
    const month = months[time.getMonth()];

    if (month === 'January' || month === 'February' || month === 'December') {
      this.setState({backgroundColor: 'white'});
    } else if
      (month === 'March' || "April" || 'May') {
      this.setState({ backgroundColor: 'yellow' });
    } else if 
    (month==='June' || month ==='July' ||month ==='August'){
      this.setState({ backgroundColor: 'green' });
     } else {
      this.setState({ backgroundColor: 'red' });
    }
  }

在渲染中，我返回以下div：

      <div className='app' style={{backgroundColor: this.state.backgroundColor }}>

背景保持蓝色。我不确定问题出在哪里。控制台未显示任何错误。任何提示将不胜感激。

Answer 1

我什么也看不到会触发handleSeason函数...

尝试一下可能会很好：

componentDidMount() {
  this.handleSeason(new Date())
}

Answer 2

您需要在代码中修复两件事

第二个if块就是这样

(month === 'March' || "April" || 'May') {

这将始终将状态设置为黄色，因为字符串April和May将被视为true，因此请如下更改

   else if (month === "March" ||month ===  "April" ||month ===  "May") {

还要检查是否正在调用如下的handleSeason函数

this.handleSeason(new Date());

根据react.js中的状态更改背景颜色

2 个答案: