React如何通过useState为映射组件设置唯一active类

千万别把active状态拆到每个列表子组件内部、各自用useState单独维护——这恰恰是你现在遇到“多个li同时处于active、渲染频繁超时”两个问题的根本原因。

• 你现在通过prop传子组件点击处理函数的实现方向是完全对的，但状态存放位置错了：把active状态下沉到每个子组件内部，相当于每个<li>都是独立的状态孤岛，既不知道兄弟组件的选中状态，也没有统一规则约束全局唯一选中项，自然会出现多个元素同时挂active类的情况。
• 分散的内部状态很容易搞出状态同步死循环：子组件改自己的内部状态→通知父组件→父组件把新状态通过prop回传给所有兄弟节点→兄弟节点收到新prop又触发自己的内部状态重算→再反向通知父组件，这种双向来回的状态流转，分分钟触发React的渲染超时告警。

你只需要给选中态搭一个单一事实来源，根本不需要推翻现有逻辑，只要调整下状态的存放位置就行：

• 把记录“当前哪个项被选中”的状态，提升到所有<li>的公共父组件里，用useState存一个值就行——这个值存当前选中项的唯一标识，比如选中项的索引、对应数据的id。
• 给每个列表子组件传两个值：
  • 一个布尔类型的isActive标识，通过“当前项的id和父组件存的选中id是不是相等”实时算出来
  • 一个点击回调，点哪个项，就把父组件存的选中id改成哪个项的id
• 整个状态流是单向走的，没有来回绕的回环：父组件存状态→给子组件传标识和回调→子组件触发点击→父组件更新选中id→重新算所有子组件的active值。因为选中id全局只有一个，天生就不会出现多个active共存的问题，也没有双向同步的问题，自然不会触发渲染超时。

这里要掰正一个误区：根本不是“该不该在组件内部用useState控制类名”的问题，是useState该放在哪一层的问题。你完全可以继续用useState做类名控制，但这个状态要搁在公共父层，而不是散在每个子组件内部各存各的。

// 公共父组件核心逻辑
const [activeId, setActiveId] = useState(null);

return (
  <ul>
    {listData.map(item => (
      <li
        key={item.id}
        className={item.id === activeId ? 'active' : ''}
        onClick={() => setActiveId(item.id)}
      >
        {item.text}
      </li>
    ))}
  </ul>
)

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