Reactjs 在为单击的子组件将其设置为活动时，如何在每个子组件上取消设置活动类

我试图在子组件B上设置活动类，同时在单击B时禁用子组件A上的活动类

到目前为止，我已经尝试在父类中使用钩子，在父类中，我使用setActive取消所有child上的活动道具；然后使用e.currentTarget.className=='link active'将当前目标的类设置为link active？e、 currentTarget.className=：e.currentTarget.className='link active'；。不幸的是，此时它所做的只是在单击的子对象上添加类或删除类

家长：

  const [active, setActive] = useState('');

  const navigate = (e) => {
    setActive('');
    e.currentTarget.className === 'link--active' ? e.currentTarget.className = '' : e.currentTarget.className = 'link--active';
  };

const [active, setActive] = useState(null);

const navigate = (id) => {
  setActive(id);
};

return (
    {menuItems.map((item) => (
      <li key={item.id} >
        <NavLink 
          {...item}
          isActive={active === item.id}
          onClick={navigate} />
      </li>
    ))}
)

在返回声明中：

{menuItems.map((item, index) => (
  <li key={index} >
    <NavLink target={item} onClick={(e) => navigate(e)} active={active} />
  </li>
))}

儿童：

<a href="#"
   onClick={props.onClick} 
   className={props.active}>
   {props.target}
</a>

编辑：

使用Ori Drori的解决方案后，在单击的导航链接上设置活动类，并将其从其余链接中删除。因为我希望onClick是导航函数，所以我所做的所有更改都是将父函数中的onClick设置为导航，并通过使用id作为参数并再次调用id作为参数的导航函数中的setActive来使导航函数调用setActive。这些类现在如下所示：

家长：

  const [active, setActive] = useState('');

  const navigate = (e) => {
    setActive('');
    e.currentTarget.className === 'link--active' ? e.currentTarget.className = '' : e.currentTarget.className = 'link--active';
  };

const [active, setActive] = useState(null);

const navigate = (id) => {
  setActive(id);
};

return (
    {menuItems.map((item) => (
      <li key={item.id} >
        <NavLink 
          {...item}
          isActive={active === item.id}
          onClick={navigate} />
      </li>
    ))}
)

儿童：

const NavLink = ({id, target, isActive, onClick}) => {
  return (
      <a href="#"
        onClick={useCallback(() => onClick(id), [id, onClick])} 
        className={isActive ? 'active' : ''}>
        {target}
      </a>
  );
}

---

我想我应该在父级中有一个状态条目，比如whichIsActive，并使用onclick函数为它提供一个活动链接的set属性，比如index

const navigate = (index) => {
this.setState{(whichIsActive: index)}
 };

然后在className中，您可以执行类似className=${this.state.whichIsActive===index&&'active'}的操作，而不会忘记'around'。我还没有测试过它，但我认为它应该有效

1为每个子组件分配一个id 2将非活动类添加到所有子组件3从所选组件中删除非活动类并向其添加活动类。这是你问题的有效解决方案。我希望有帮助

类应用程序扩展了React.Component{ 状态={ 子组件：[ {id:ironman，组件：}， {id:captainamerica，组件：}， {id:thor，组件：}， {id:loki，组件：}， {id:spiderman，组件：} ], CurrentComponentD： }; clickHandler=idComponent=>{ //访问所有类 如果this.state.currComponentId！== 文件 .getElementByIdthis.state.currComponentId .classList.removeactive； let element=document.getElementsByClassNamechild-components； 对于let index=0；index{ 回来 this.clickHandlerelement.id} > {element.id} {this.state.currComponentId===element.id？ 活性成分 ：null} ; }} {this.state.childComponents.mapelement=>{ 如果element.id==this.state.currComponentId 返回{element.component}； }} ; } } const IronMan==>这是IronMan组件； const CaptainAmerica==>这是CaptainAmerica组件； 常数Thor=>这是Thor组件； 常量Loki==>这是Loki组件； 常数蜘蛛侠==>这是蜘蛛侠组件； ReactDOM.render，document.getElementById'root'； .主动{ 边框：实心1px红色； 背景色：黑色； 颜色：fff； } .不活跃{ 颜色：000； 背景色：fff； } .家长{ 边框：实心1px322f31； } 将setActive传递给导航链接。单击导航链接时，它会通过setActive设置其id。每个项目还接收isActive属性，如果活动状态与其id匹配，则该属性为true

const{useCallback，useState}=React const NavLink={id，target，isActive，onClick}=> const Parent={menuItems}=>{ const[active，setActive]=useStatenull； 回来 {menuItems.mapitem=> } } const items=[{id:0，目标：'Ready'}，{id:1，目标：'Player'}，{id:2，目标：'One'}] ReactDOM.render , 演示 .导航链接{ 颜色：蓝色； 文字装饰：无； } .主动{ 颜色：红色； }

---

感谢您的回复，目前它确实可以工作，但是我遇到的下一个问题是，每个navlink现在都调用setActive，而不是navigate，其中setActive也被调用。是否可以调用navigate，然后调用setActive？没关系，我已经找到了解决方案，我将在编辑中发布它