React 的 componentDidMount() 中的三元运算符问题

Question

我的组件中的三元运算符有问题。我创建了一个函数来检查太阳是否升起和 return 布尔值：

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;
}

我使用三元运算符调用函数并根据布尔值设置背景图像：

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

你没有显示完整的 class 所以我不知道 this.state.sunrise 和 this.state.sunset 是从哪里来的，但我敢打赌它们设置不正确当您在 componentDidMount.

中调用 this.dayTime() 时

要么在你的构造函数中正确初始化它们，要么确保在它们被修改时更新 body 的背景。

最好的方法是你的第二个工作示例，因为只要状态发生变化，它就会自动运行 - 它也不会修改 React 树之外的 DOM，这是个好习惯。

Answer 2

使用isDaytime作为状态并以此为基础操纵classes。 dayTime 函数甚至可以在 class 之外是私有的（如果它不使用状态变量）。

js

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
      })} />
    )
  }
}

css

.bg {
  ...
}

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

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

React 的 componentDidMount() 中的三元运算符问题

Ternary operator issue in React's componentDidMount()

javascript

ternary

reactjs