如何在两个React组件之间切换isActive激活状态

你当前每个ListElement组件的isActive是组件内部私有状态，不同实例之间的状态完全隔离，无法互相访问修改，要实现单选互斥效果，需要做状态提升，把激活状态的管控权放到它们的公共父组件中。

改造步骤 #

• 第一步：修改ListElement组件，移除内部状态，改为接收父组件传入的激活状态和点击回调作为props

type ListElementProps = {
  isActive: boolean;
  onClick: () => void;
}

export const ListElement = ({ isActive, onClick }: ListElementProps) => {
  return (
    <li
      onClick={onClick}
      className={isActive ? 'active' : ''}
    >
      toggle between these elements
    </li>
  )
}

• 第二步：在公共父组件中维护当前激活项的唯一标识，统一管控所有列表项的激活状态

import { useState } from 'react';
import { ListElement } from './ListElement';

export default function App() {
  // 初始值设为null表示无激活项
  const [activeId, setActiveId] = useState<number | null>(null);

  return (
    <ul>
      {/* 可根据你的实际列表数据循环渲染，此处为示例 */}
      <ListElement 
        isActive={activeId === 1} 
        onClick={() => setActiveId(1)} 
      />
      <ListElement 
        isActive={activeId === 2} 
        onClick={() => setActiveId(2)} 
      />
      <ListElement 
        isActive={activeId === 3} 
        onClick={() => setActiveId(3)} 
      />
    </ul>
  )
}

如果需要支持点击已激活项取消选中，调整点击回调逻辑即可：

onClick={() => setActiveId(activeId === 1 ? null : 1)}

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