React中单个元素多类名切换问题求助

错误原因 #

你写的img标签里，{...unblurSolution ? "solution" : "unblur"}是完全错误的语法——React的className属性需要接收字符串，不能用对象展开运算符（...）处理字符串，这部分代码根本不会生效，所以img的类名始终只受unblur状态控制，和Solution按钮的点击无关。

修正方案 #

根据你的需求，点击Solution按钮时要把img的blur类切换为unblur，同时h1的类正常切换，你需要把img的className改成基于unblurSolution的条件判断，同时可以保留原有的unblur状态逻辑（如果需要Start按钮的功能不受影响）。

修改后的完整代码如下：

import React from 'react'
import {useState, useEffect} from "react";
import "./Celeb.css"
import images from "../Index.json"

function Celeb() {
  const [image, setImage] = useState();
  const [name, setName] = useState();
  const [unblur, setUnblur] = useState(true);
  const [unblurSolution, setUnblurSolution] = useState(true);
  const [imageList, setImageList] = useState(images);
  // 省略其他业务逻辑...

  return (
    <div className='celeb'>
      <div className='celeb_buttons'>
        <button className='play_button' onClick={handleNext}>Next</button>
        <button className='play_button' onClick={()=> setUnblur(!unblur)}>Start</button>
        <button className='play_button' onClick={()=> setUnblurSolution(!unblurSolution)}>Solution</button>
      </div>
      <div className='pic'>
        {/* 修正后的img className：点击Solution时强制显示清晰状态，否则遵循Start按钮的控制 */}
        <img className={unblurSolution ? "unblur" : (unblur ? "blur" : "unblur")} src={image} />
        <h1 className={unblurSolution ? "solution" : ""}>{name}</h1>
      </div>
    </div>
  )
}

逻辑说明 #

• 当unblurSolution为true（点击Solution按钮切换状态后），img直接使用unblur类，实现清晰显示；
• 当unblurSolution为false，img回到由unblur状态控制的逻辑（Start按钮的模糊/清晰切换功能依然生效）；
• h1的类名逻辑保持不变，正常切换solution类和空字符串。

如果你的需求是点击Solution按钮时，img在blur和unblur之间直接切换，完全独立于Start按钮，可以把img的className改成：

<img className={unblurSolution ? "unblur" : "blur"} src={image} />

内容的提问来源于stack exchange，提问作者Brinda5