React JS中fa-eye密码显隐按钮图标不随点击切换问题

问题表现 #

密码输入框的显示/隐藏切换功能正常生效，但按钮内的图标不会随状态同步切换。

核心原因 #

使用原生<i>标签加载Font Awesome图标时，React的diff算法会默认复用同层级的同类型DOM节点；如果引入的是Font Awesome的JS版本，它会在页面加载后把原生<i>标签替换为内置的<svg>图标元素，替换后React无法追踪到该节点的属性变更，即使状态更新后className的值已经变化，实际渲染的图标也不会同步刷新。

修复方案 #

方案1：给图标标签加唯一key强制重绘（无需额外依赖） #

直接给<i>标签添加和状态绑定的key属性，状态变化时key值同步改变，React会识别到节点变化，直接卸载旧节点、挂载新节点，就能触发图标正确渲染：

<Button className="btn" onClick={togglePasswordType} style={{ color: "lightgray" }}>
  <i 
    key={passwordType ? 'eye' : 'eye-slash'}
    className={passwordType ? 'fas fa-eye' : 'fas fa-eye-slash'}
  ></i>
</Button>

可选优化：切换状态的逻辑建议改成函数式更新，避免异步场景下拿到闭包缓存的旧状态值：

const togglePasswordType = () => {
  setPasswordType(prev => !prev)
}

方案2：使用Font Awesome官方React组件（长期维护推荐） #

原生<i>标签的适配问题本质是第三方DOM操作和React渲染机制冲突，直接使用官方提供的React组件可以从根源避免这个问题：

1. 安装对应依赖

npm i @fortawesome/react-fontawesome @fortawesome/free-solid-svg-icons

2. 替换原生i标签

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faEye, faEyeSlash } from '@fortawesome/free-solid-svg-icons'

// 按钮内的图标部分替换为
<FontAwesomeIcon icon={passwordType ? faEye : faEyeSlash} />

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