Question

我正在创建一个天气应用程序，我想根据从API中获取的数据动态更改背景。

我已经创建了一个变量和一个if语句，但是由于我使用的是module.scss，我在分配变量时遇到了麻烦，并且我不确定语法。

export const MapWithGroundOverlay = compose(
  withScriptjs,
  withGoogleMap,
  withStateHandlers(
    () => ({
      opacity: 0.1
    }),
    {
      incrementOpacity: ({ opacity }) => () => ({
        opacity: opacity >= 1.0 ? 0.0 : opacity + 0.1
      })
    }
  )
)(props => (
  <div>
    <button onClick={props.incrementOpacity}>Increment opacity</button>
    <GoogleMap defaultZoom={12} defaultCenter={{ lat: 40.74, lng: -74.18 }}>
      <GroundOverlay
        defaultUrl="https://www.lib.utexas.edu/maps/historical/newark_nj_1922.jpg"
        defaultBounds={
          new google.maps.LatLngBounds(
            new google.maps.LatLng(40.712216, -74.22655),
            new google.maps.LatLng(40.773941, -74.12544)
          )
        }
        defaultOpacity={props.opacity}
      />
    </GoogleMap>
  </div>
));

现在它不起作用。我已经将CSS文件定义为：

render() {


let bgColorClass = 'App'; // very-warm, warm, normal, cold, very-cold

if (this.state.main === "rain") {
  bgColorClass = 'rain';
 }
else if (this.state.main === "thunderstorm") {
  bgColorClass = 'thunder';
}
else if (this.state.main === "drizzle") {
  bgColorClass = 'drizzle';
}
else if (this.state.main === "Snow") {
  bgColorClass = 'snow';
}
else if (this.state.main === "Clear") {
  bgColorClass = 'sun';
}
else if (this.state.main === "Clouds") {
bgColorClass = 'clouds';
} else {
bgColorClass = 'else'
}

  return (
<div className={Styles.App} style={{bgColorClass}}>
  <Header />
  <Form
    getWeather={this.getWeather} />
<Weather 
  temperature={this.state.temperature}
  city={this.state.city}
  country={this.state.country}
  description={this.state.description}
  main={this.state.main}

Answer 1

在您的bgColorClass中添加className

示例：

<div className={"App "+ bgColorClass}>

Answer 2

现在，您正在将一个单词回显到内联style属性中，这是无效的CSS。您需要将bgColorClass添加到className的{{1}}属性中。

顺便说一句，您正在使用大量的if语句。您还可以使用div语句

switch

甚至更好：将所有CSS类重命名为可能的状态值，然后直接将该值作为类插入：

switch (this.state.main) {
  case "rain":
    bgColorClass = "rain";
    break;
  case "drizzle":
    bgColorClass = "drizzle";
    break;
  // and so on…
  default:
    bgColorClass = "else";
    break;
}

使用此技巧，您可以省略条件<div className={"App " + this.state.main}> // e.g. if this.state.main is 'rain', then the output would be <div class="App rain">或if语句

如何动态更改背景？

2 个答案: