Question

我的组件中的三元运算符有问题。我创建了一个函数来检查Sun是否已启动并返回布尔值：

dayTime() {
  const time = new Date();
  const sunrise = new Date(this.state.sunrise*1000);
  const sunset = new Date(this.state.sunset*1000);
  return time > sunrise && time < sunset;
}

我然后使用三元运算符来调用函数并根据布尔值设置backgroundImage：

componentDidMount() {
  document.body.style.backgroundImage = "url(" + (this.dayTime()? day_img_cov : night_img_cov) + ")";
    }

不幸的是，三进制无法正常工作。它始终选择第二张图像。但是，当我在render（）中使用三进制时，它可以正常工作：

render() {

  return (
    <div className="app" style={{backgroundImage: "url(" + (this.dayTime()? day_img : night_img) + ")"}}>
      ...
    </div>
}

Answer 1

您尚未显示完整的课程，因此我不知道this.state.sunrise和this.state.sunset的来源，但是我敢打赌，当您致电{{1 }}在this.dayTime()中。

要么在构造函数中正确初始化它们，要么确保每当修改它们时都更新主体的背景。

最好的方法是使用第二个示例，因为它会在状态更改时自动运行-它也不会在React树之外修改DOM，这是一个好习惯。

Answer 2

使用dayTime作为状态并基于该状态操作类。 import classnames from 'classnames' class Wallpaper extends Component { state = { isDaytime: daytime(); } render() { const { isDaytime } = this.state; return ( <div className={classnames('bg', { bg__daytime: isDaytime bg__sunset: !isDaytime })} /> ) } }函数甚至可以在类外部私有（如果它不使用状态变量）。

js

.bg {
  ...
}

.bg__daytime {
  background-image: url(day_img.png);
}

.bg__sunset {
  background-image: url(night_img.png);
}

css

RegressionModel

React的componentDidMount（）中的三元运算符问题

2 个答案: