如何在ReactJS中使用useRef获取元素

Question

我想在tui.calendar的日程表卡上添加一些事件。我试图获得根元素，然后querySelectorAll日程表卡的属性。

日程表卡，calendaref已经存在。getRootElement的根元素存在于日程表卡的div标签中，但是我的element仍然是空的。

怎么了?我的目的是获得日程表卡元素，然后为每个添加上下文菜单。谢谢!

更新:我改变了uselayouteeffect使用效果，然后它的工作。但只在Codesanbox上，而不是我的项目:D我不知道为什么?

我的代码

Answer 1

看看这个。看起来很有效。我刚刚得到了一个具有getInstance()的日历实例，然后通过instance.getElement(sc.id,sc.calendarId)得到了对DOM元素的引用。

useEffect(() => {
if (calendarRef && calendarRef.current) {
const instance = calendarRef.current.getInstance();
schedules.forEach((sc) => {
/*
const instance = calendarRef.current?.getRootElement();
const element = instance.getElementsByClassName(
"tui-full-calendar-time-schedule "
);
const elementArr = Array.from(element!);
console.log(elementArr);
*/
console.log(instance.getElement(sc.id,sc.calendarId));
});
}
});