使用 useRef 访问许多类答案

【问题标题】：Acces many classes with useRef使用 useRef 访问许多类
【发布时间】：2020-04-18 11:49:10
【问题描述】：

我想访问将使用 map() 函数呈现的所有类。我有下一种情况：

{arr.map((i, k) => {
return <div ref={car} className={`car-nr-${i.id}`} key={k}}> </div>
})}

现在我尝试访问我的参考。

const floor = useRef(null) car.current.style.transform =rotateY(10deg); 但这不起作用。样式仅适用于我的arr 中的最后一个元素。如何访问所有元素并应用rotateusing useRef？

【问题讨论】：

不确定您要做什么。目前还不清楚。但是，您仅将 ref 分配给列表中的最后一个组件。（所有映射的组件只使用一个 ref）
@TomSlutsky，我的问题是如何访问将在 map() 函数中呈现的所有元素？我想为全部应用样式，而不仅仅是最后一个。
@TomSlutsky，或者我可以使用 querrySelectorAll？
我不明白你为什么需要参考。您可以在地图功能中应用样式
是的，正如 Tom 所说，您不需要使用 refs。您可以使用 style 属性将样式应用于组件。 Refs 只会让事情变得比他们需要的更复杂。

标签： reactjs

【解决方案1】：

ref 还接受一个回调函数，您可以使用该函数将所有 ref 存储在一个数组中：

// Init the array
myRefs = [];

// A new div has been created, add it to the elements array
addRef = (element) => {
    this.myRefs.push(element);
}

// Call your function inside the div
return <div ref={addRef }...

【讨论】：

【解决方案2】：

我认为您应该为每个组件创建一个唯一的ref。从这里查看示例add refs dynamically。

【讨论】：