Javascript 如何判断父元素是否包含具有 useEffect 和 UseRef 的特定类的子元素

我想accordion-content级，如果包括link-active或没有.所以我创建了这样的代码.

import {React, useRef, useEffect, useState } from 'react';

export function App(props) {
  const accordionOperation = useRef(null);
  const [isOperationActive, setOperationActive] = useState(false);
  const [isOperationOpen, setOperationOpen] = useState(false);

  useEffect(() => {
    const accordionOperationChildren = accordionOperation.current?.children;
    for (let i = 0; i < accordionOperationChildren?.length; i++) {
      if (accordionOperationChildren[i].classList.contains("link-active")) {
        setOperationActive(true);
      } else {
        setOperationActive(false);
      }
    }
  }, []);

  return (
    <div className='App'>
      <ul className="accordion-content" ref={accordionOperation}>
        <NavLink
          to="/hc20/bee"
          className={({ isActive }) => (
            isActive ? "link-active" : "disable"
          )}
        >
          <li className="aside_list-item">Bees</li>
        </NavLink>
        <NavLink
          to="/hc20/command"
          className={({ isActive }) => (
            isActive ? "link-active" : "disable"
          )}
        >
          <li className="aside_list-item">Commands</li>
        </NavLink>
      </ul>
    </div>
  );
}

但我的状态称为isOperationActive并没有根据active-link改变

那么，我如何才能保持我的isOperationActive个状态更新？

This is rest of my code

<div className="accordion operations">
  <div className="accordion-item">
    <div
      className="accordion-title"
      role="button"
      tabIndex={0}
      onClick={() => setOperationOpen(!isOperationOpen)}
    >
      <div
        className={isOperationOpen
        ? "accordion-title-head "
        : "accordion-title-head"}
      >
        <ArrowsHorizontal style={{ paddding: "4px" }} />
        <div className={"dropdownOperation"}>Operations</div>
        <div className="text-white">
          {isOperationOpen ? <ChevronUp /> : <ChevronDown />}
        </div>
      </div>
    </div>
    {isOperationOpen && (
      <ul className="accordion-content" ref={accordionOperation}>
        <NavLink
          to="/hc20/bee"
          className={({ isActive }) => (isActive ? "link-active" : "disable")}
        >
          <li className="aside_list-item">Bees</li>
        </NavLink>
        <NavLink
          to="/hc20/command"
          className={({ isActive }) => (isActive ? "link-active" : "disable")}
        >
          <li className="aside_list-item">Commands</li>
        </NavLink>
        <NavLink
          to="/hc20/company"
          className={({ isActive }) => (isActive ? "link-active" : "disable")}
        >
          <li className="aside_list-item">Companies</li>
        </NavLink>
        <NavLink
          to="/hc20/dashboard"
          className={({ isActive }) => (isActive ? "link-active" : "disable")}
        >
          <li className="aside_list-item">Dashboards</li>
        </NavLink>{" "}
        <NavLink
          to="/hc20/device-profile"
          className={({ isActive }) => (isActive ? "link-active" : "disable")}
        >
          <li className="aside_list-item">Device Profiles</li>
        </NavLink>
        <NavLink
          to="/hc20/location"
          className={({ isActive }) => (isActive ? "link-active" : "disable")}
        >
          <li className="aside_list-item">Location</li>
        </NavLink>{" "}
        <NavLink
          to="/hc20/route"
          className={({ isActive }) => (isActive ? "link-active" : "disable")}
        >
          <li className="aside_list-item">Routes</li>
        </NavLink>{" "}
        <NavLink
          to="/hc20/sub"
          className={({ isActive }) => (isActive ? "link-active" : "disable")}
        >
          <li className="aside_list-item">Subscriptions</li>
        </NavLink>
        <NavLink
          to="/hc20/trackable"
          className={({ isActive }) => (isActive ? "link-active" : "disable")}
        >
          <li className="aside_list-item">Trackables</li>
        </NavLink>{" "}
        <NavLink
          to="/hc20/user"
          className={({ isActive }) => (isActive ? "link-active" : "disable")}
        >
          <li className="aside_list-item">Users</li>
        </NavLink>
      </ul>
    )}
  </div>
</div>