reactjs - 如何在每个子组件上取消设置活动类，同时为单击的子组件设置为活动类

Question

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

到目前为止，我已经尝试在父类中使用钩子，在其中我通过 using 取消设置所有子类的活动道具，setActive('');然后将当前目标的类设置为 link--通过 using 激活e.currentTarget.className === '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';
  };

并在返回语句中：

{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 的解决方案后，在单击的 NavLink 上设置了活动类并从其余部分中删除。由于我希望 onClick 成为导航功能，因此我所做的只是将父级中的 onClick 设置为导航，并通过使用 id 作为参数来调用 setActive 并在导航函数中以 id 作为参数再次调用 setActive。这些类现在看起来像这样：

家长：

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>
  );
}

标签： reactjsparent-childreact-hookssetstate

Answer 1

传递setActive给 NavLinks。单击a 时NavLink，它设置为idvia setActive。每个项目还接收isActive属性，即状态true是否active与其匹配id。

const { useCallback, useState } = React

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

const Parent = ({ menuItems }) => {
  const [active, setActive] = useState(null);

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

const items = [{ id: 0, target: 'Ready' }, { id: 1, target: 'Player' }, { id: 2, target: 'One' }]

ReactDOM.render(
  <Parent menuItems={items} />,
  demo
)

.navLink {
  color: blue;
  text-decoration: none;
}

.active {
  color: red;
}

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

<div id="demo"></div>