reactjs - React，如何将类添加到 nodeList 孩子？

Question

所以，就像我的问题一样，我有一个nodeList收藏。它看起来像这样：

我什至不尝试，因为我无法获得单个元素。

代码生成：

const getNode = text => OptionSelectRef.current.querySelector(text);
const setOption = getNode(".blogs-list-items");
var children = setOption.childNodes[0];
console.log(children)

所以，我需要做的是向第三和第五元素添加类......有人可以帮我吗？

标签： reactjs

Answer 1

您可以先获取您wrapperRef的孩子，然后遍历它们，如果它们的索引与您想要的索引匹配，则将类添加到它们。

你可以看看这个例子

import React, { useEffect, useRef } from "react";
import ReactDOM from "react-dom";

const App = () => {
  const wrapperRef = useRef(null);
  useEffect(() => {
    // Get wrapper's childrens
    const childrens = Array.from(wrapperRef.current.children);
    // Loop through children
    childrens.forEach((children, idx) => {
      // If children's current index match 2 or 4
      if ([2, 4].some(matchingIdx => idx === matchingIdx)) {
        // Add class to that children
        children.classList.add('new-class');
      }
    })
  }, [])
  return (
    <div ref={wrapperRef} className="blog-list-items__elements">
      <div className="blog-list-items"></div>
      <div className="blog-list-items"></div>
      <div className="blog-list-items"></div>
      <div className="blog-list-items"></div>
      <div className="blog-list-items"></div>
    </div>
  );
};

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);