React中动态管理多个条件类名：避免常见陷阱与最佳实践

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

import React, { useState } from 'react';
import './Celeb.css'; // 假设样式文件存在

function Celeb() {
  const [isBlurred, setIsBlurred] = useState(true); // 控制模糊效果
  const [showSolution, setShowSolution] = useState(false); // 控制解决方案显示样式

  return (
    <div className='container'>
      <div className='controls'>
        <button onClick={() => setIsBlurred(!isBlurred)}>
          {isBlurred ? '取消模糊' : '应用模糊'}
        </button>
        <button onClick={() => setShowSolution(!showSolution)}>
          {showSolution ? '隐藏方案' : '显示方案'}
        </button>
      </div>
      <div className='display-area'>
        {/* 使用模板字面量合并多个条件类名 */}
        <img
          className={`${isBlurred ? "blur" : "unblur"} ${showSolution ? "solution-visible" : ""}`}
          src="path/to/your/image.jpg" // 请替换为实际图片路径
          alt="示例图片"
        />
        <h1 className={showSolution ? "solution-text" : "hidden-text"}>
          这是解决方案的文本
        </h1>
      </div>
    </div>
  );
}

import React, { useState } from 'react';
import './Celeb.css'; // 假设样式文件存在

function Celeb() {
  const [isBlurred, setIsBlurred] = useState(true);
  const [showSolution, setShowSolution] = useState(false);

  // 在渲染前计算图片元素的类名
  let imgClasses = []; // 使用数组存储类名，方便管理

  if (isBlurred) {
    imgClasses.push('blur');
  } else {
    imgClasses.push('unblur');
  }

  if (showSolution) {
    imgClasses.push('solution-visible');
  }

  // 将数组中的类名通过空格连接成一个字符串
  const finalImgClassName = imgClasses.join(' ');

  return (
    <div className='container'>
      <div className='controls'>
        <button onClick={() => setIsBlurred(!isBlurred)}>
          {isBlurred ? '取消模糊' : '应用模糊'}
        </button>
        <button onClick={() => setShowSolution(!showSolution)}>
          {showSolution ? '隐藏方案' : '显示方案'}
        </button>
      </div>
      <div className='display-area'>
        {/* 使用预计算的类名变量 */}
        <img
          className={finalImgClassName}
          src="path/to/your/image.jpg"
          alt="示例图片"
        />
        <h1 className={showSolution ? "solution-text" : "hidden-text"}>
          这是解决方案的文本
        </h1>
      </div>
    </div>
  );
}