在组件中通过类名访问dom元素的反应

Question

我有一个react组件，它将一堆记录放到页面上。记录的数量可以自然而然地变化，因此我想修改这些项目的宽度，它根据我的项目数量而变化。这就是我的情况......(显然它看不到类元素，可能是因为dom没有被渲染？但我认为useEffect是在dom被加载后触发的......)

我得到一个document.getElementsByClassName()is undefined的错误......

....
function Thumbs(props)
{
    useEffect(()=>{
        // calculate how many records we have, and get the width
        // if i had 5, it would be 100%/5 records... this I can get... 
        const eachItemWidth = "20%";

        // loop/map over all the elements and set their NEW width
        document.getElementsByClassName("work").map(element=>{
            element.style.width = eachItemWidth;
        })
    },[]);

return (
        <div>
            <div className="works" id="worksStripe">
                {dataRecords.map(record =>
                    {

                    return(
                        <div className={`work`}>
                            <img src={`imgs/${record.coverImage}`} />
                        </div>
                    )
                    }
                )
                }
            </div>
        </div>
    )
}

Answer 1

当你使用htmlCollection时，你已经得到了一个问题。document.getElementsByClassName 这不是一个数组，试着做

 const elements = Array.from(document.getElementsByClassName("work"));

再用

        elements.map(element=>{
            element.style.width = eachItemWidth;
        })

Answer 2

你可以替换 document.getElementsByClassName("work") 与：

document.querySelectorAll(".work").forEach(element => {
     element.style.width = eachItemWidth;
})