React如何通过输入数据动态修改CSS 以Open Weather天气数据为例

核心逻辑 #

React 不需要手动操作 DOM 做类名切换，所有样式逻辑都可以直接和状态（state）绑定，数据更新后视图会自动同步，和你原生 JS 的判断逻辑本质是一致的，只是写法适配 React 的声明式规则。

两种常见场景实现 #

场景1：修改组件内部元素的样式（比如天气卡片） #

直接通过模板字符串或者单独的计算函数，把类名和天气状态挂钩即可：

import { useState } from 'react'

function WeatherCard() {
  // 存储从OpenWeather获取的天气描述
  const [weatherDesc, setWeatherDesc] = useState('')

  // 抽离类名计算逻辑，和你原生的判断逻辑完全一致
  const getWeatherClass = (desc) => {
    if(desc.indexOf('rain') > 0) return 'rainy'
    if(desc.indexOf('cloud') > 0) return 'cloudy'
    if(desc.indexOf('sunny') > 0) return 'sunny'
    return 'clear'
  }

  return (
    // 直接绑定计算后的类名
    <div className={`card ${getWeatherClass(weatherDesc)}`}>
      <p>当前天气：{weatherDesc}</p>
    </div>
  )
}

场景2：修改全局body的样式（对应你原生代码的需求） #

body 不属于当前组件的 DOM 范围，需要借助 useEffect 在天气状态变化时同步修改：

import { useState, useEffect } from 'react'

function WeatherApp() {
  const [weatherDesc, setWeatherDesc] = useState('')

  // 模拟调用OpenWeather接口获取数据
  const fetchWeatherData = async () => {
    const response = await fetch('你的OpenWeather接口地址')
    const data = await response.json()
    setWeatherDesc(data.weather[0].description)
  }

  const getWeatherClass = (desc) => {
    if(desc.indexOf('rain') > 0) return 'rainy'
    if(desc.indexOf('cloud') > 0) return 'cloudy'
    if(desc.indexOf('sunny') > 0) return 'sunny'
    return 'clear'
  }

  // 监听weatherDesc变化，同步更新body类名
  useEffect(() => {
    if(!weatherDesc) return
    // 清除旧的天气类名，避免类名叠加
    document.body.classList.remove('rainy', 'cloudy', 'sunny', 'clear')
    // 添加新的类名
    const currentClass = getWeatherClass(weatherDesc)
    document.body.classList.add(currentClass)
  }, [weatherDesc])

  return (
    <div className="app">
      <button onClick={fetchWeatherData}>获取天气</button>
      {/* 其他页面内容 */}
    </div>
  )
}

补充说明 #

• 如果要修改内联样式不需要写类名，直接绑定style对象即可：

  <div style={{ background: weatherDesc.includes('rain') ? '#cbd5e1' : '#fef3c7' }} />
  

• 如果你用的是 Next.js 等 SSR 框架，操作 document 前需要先判断客户端环境：if (typeof document !== 'undefined') { 执行类名修改逻辑 }，避免服务端渲染时报错。

内容的提问来源于stack exchange，提问作者Thorben C.