React项目中点击切换FontAwesome图标问题求助

核心思路 #

React是数据驱动视图的框架，直接操作DOM修改<FontAwesomeIcon>的icon属性不符合React范式，应该通过本地状态管理每个项的勾选状态，用状态控制图标和样式的切换。

具体实现方案 #

1. 初始化勾选状态

用useState维护一个记录勾选项的对象（长列表下性能优于数组）：

import { useState } from 'react';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faSquare, faCheckSquare } from '@fortawesome/free-solid-svg-icons';

// 组件内部状态，key为项的index，value为布尔值标记是否勾选
const [checkedItems, setCheckedItems] = useState({});

2. 实现状态切换函数

点击列表项时，翻转对应index的勾选状态：

const toggleCheck = (index) => {
  setCheckedItems(prevState => ({
    ...prevState,
    [index]: !prevState[index]
  }));
};

3. 用状态控制渲染

在渲染列表时，根据checkedItems的状态动态切换图标和类名：

<ul className="ingredient-list">
  {doc.ingredients && doc.ingredients.map((ing, index) => {
    const isChecked = checkedItems[index];
    return (
      <li 
        key={index} 
        onClick={() => toggleCheck(index)}
        className={isChecked ? 'strike' : ''}
      >
        <FontAwesomeIcon 
          icon={isChecked ? faCheckSquare : faSquare} 
          className="icon" 
        />
        <span className="blocked">{ing}</span>
      </li>
    );
  })} 
</ul>

方案优势 #

• 完全遵循React状态驱动逻辑，无需手动操作DOM（包括SVG元素），避免了直接操作DOM带来的兼容性问题。
• 勾选状态仅存储在组件本地，页面刷新后自动重置，符合「仅本地显示不存储」的需求。
• 代码结构清晰，状态变化与视图渲染一一对应，便于后续维护。

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