I am having trouble figuring out how to get or filter a bunch of childNodes by their style class name inside my useEffect. Using ReactJs v18.

Straight after the line with: const circleElements = launcherCircle!.childNodes; I would like to get/filter the div's with the class name 'launcherPos' so I can position them in a circle formation.

const LauncherComponent = () => {
  const launcherCircleRef = useRef<HTMLDivElement>(null);

  let modules: Module[] | null = GetModules();

  const enableLauncher = (module: Module) => {
    return !module.IsEnabled ? styles['not-active'] : null;
  };

  useEffect(() => {
    const launcherCircle = launcherCircleRef.current;
    const circleElements = launcherCircle!.childNodes;
    let angle = 360 - 190;
    let dangle = 360 / circleElements.length;

    for (let i = 0; i < circleElements.length; i  ) {
      let circle = circleElements[i] as HTMLElement;
      angle  = dangle;
      circle.style.transform = `rotate(${angle}deg) translate(${launcherCircle!.clientWidth / 2}px) rotate(-${angle}deg)`;
    }
  }, []);

  if (modules == null){
    return <Navigate replace to={'/noaccess'} />
  } else {
    return (
      <div data-testid="Launcher" className={styles['launcherContainer']} >
        <div className={styles['launcherCircle']} ref={launcherCircleRef}>
          {modules.map(function (module: Module, idx) {
            return (
              <div key={idx} className={styles['launcherPos']} ><div className={`${styles['launcherButton']} ${enableLauncher(module)}`}><img src={module.ImagePath} alt={module.Prefix} /></div></div>
            )
          })}
          <div className={styles['launcherTextDiv']}>
            <span>TEST</span>
          </div>
        </div>
      </div>
    )
  }
};
export default LauncherComponent;

From what I've read getElementsByClassName() is not advisable practise because of the nature of ReactJs and it's virtual DOM.

I tried the following filter but I think with React garburling the class name I didn't get anything back.

const launcherChildren = launcherCircle!.children;
const circleElements = [...launcherChildren].filter(element => element.classList.contains('launcherPos'));

Maybe there's a way to ref an array of the just the children with the launcherPos class???

There must be a couple of different ways, but, they are eluding me.

CodePudding user response：

When you filter/map a collection of HTMLElements, the results are in the form of objects, which contains properties like, props, ref etc. Since className is a prop on the element, you should try looking for the class name by digging into the props key. Simply put, all the props that you pass to the element, like onClick, onChange, value, className are stored under the props property. You can filter the results by converting the class name into an array and further checking if it contains the target string (launcherPos in this case).

Your code should look something like this:

const circleElements = [...launcherChildren].filter(element=>element.props.className.split(' ').includes('launcherPos'))