React实现点击按钮切换替换图片功能的相关疑问

解决方案 #

1. 先修正现有代码的逻辑不一致问题：你在Show1函数中操作的Clicked状态是布尔类型（true/false），但三元表达式的判断条件写的是Clicked === 0，需要先统一判断逻辑避免功能失效。
2. 三元表达式的两个分支分别填入你需要切换的两张图片的<img>标签即可，示例写法如下：

{/* 示例：Clicked为true时显示选中状态图标，为false时显示未选中状态图标，替换src为你自己的图片路径 */}
{Clicked ? 
  <img src="/student-active.png" alt="学生身份已选中" /> : 
  <img src="/student-inactive.png" alt="学生身份未选中" />
}

优化后的完整参考代码 #

// 状态初始化示例（如果你之前的声明不符合要求可以参考调整）
const [Clicked, setClicked] = useState(false);

const Show1 = () => {
  // 简化状态切换逻辑，无需手动写if判断
  setClicked(prev => !prev);
}

return (
  <div className="SignIn__AsWhat">
    <button className="SignIn__AsStudent" onClick={Show1}> 
      {Clicked ? 
        <img src="/student-active.png" alt="学生身份已选中" /> : 
        <img src="/student-inactive.png" alt="学生身份未选中" />
      }                
      Je suis étudiant
    </button>
    <button className="SignIn__AsTeacher">
      Je suis enseignant
    </button>
  </div>
)

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