如何将HTMLCollection转换为Array而不是React中的空数组?

Question

我正在学习react，也是一个初学者。当我试图将HTMLCollection转换为数组时，出现了一个问题。这里的代码。

const HeroSlide = ({ items }) => {
const heroSlide = useRef(null);
useEffect(() => {
const arr = Array.from(heroSlide.current.children);
arr.map((child) => {
child.className = 'text only';
});
console.log(arr);
// got 4 text-only divs. divs created by using map func are excluded
}, []);
return (
<div className="heroSlide" ref={heroSlide}>
<div>text only</div>
{items.map((e, i) => (
<div className="heroSlide__items">
<img
src={apiConfig.originalImage(e.backdrop_path)}
className="heroSlide__backgroundImage"
alt=""
/>
</div>
))}
<div>text only</div>
<div>text only</div>
<div>text only</div>
</div>
);
};

如果我使用setTimeoutconsole.log工作。但我需要更好的方法。

useEffect(() => {
setTimeout(() => {
const arr = Array.from(heroSlide.current.children);
console.log(arr);
}, 50);
}, []);

Answer 1

创建一个变量并按如下所示推送值-

const heroSlide = useRef(null);
let arr = []
useEffect(() => {
console.log(heroSlide.current.children);
console.log('array is',arr.push(...heroSlide.current.children))
console.log('arr',arr)    
}, []);

Answer 2

我就这样解决了这个问题。我将动态过程传递给子节点来执行它。现在我得到了完整的数组。

const HeroSlideItems = ({ items }) => {
return (
<div className="heroSlide__items">
{items.map((e, i) => {
return (
<div className="heroSlide__items__index">
<img
src={apiConfig.originalImage(e.backdrop_path)}
className="heroSlide__backgroundImage"
alt=""
/>
</div>
);
})}
</div>
);
};
const HeroSlide = ({ items }) => {
const heroSlideRef = useRef(null);
useEffect(() => {
if (heroSlideRef.current) {
const children = Array.from(heroSlideRef.current.children);
children.forEach((c) => {
c.className = 'changed';
});
}
}, []);
return (
<div className="heroSlide" ref={heroSlideRef}>
<div>testclass</div>
<HeroSlideItems items={items} />
<div>testclass</div>
<div>testclass</div>
<div>testclass</div>
</div>
);
};