创建DOM元素的引用数组时出现问题

Question

我使用这个钩子：react use scrollspy，它在数组中使用useRef的sectionRefs

const sectionRefs = [
useRef(null),
useRef(null),
useRef(null),
];
const activeSection = useScrollSpy({
sectionElementRefs: sectionRefs,
offsetPx: -80,
});

但我用这个而不是引用数组：

const menuItemsRef = {
home: "0",
packs: "4",
faq : "8",
projects: "2",            
team : "7",
contact : "6"    
}
const menuRef = useRef(Object.keys(menuItemsRef));
let menuRef2 = [];    
useEffect(()=>{
menuRef2 = Object.values(menuRef.current).slice(6,12).map((item)=>
{
return { current : item }
});
console.log("menuRef " , menuRef2);
},[]);
const activeSectionNavbar = useScrollSpy({
sectionElementRefs: menuRef2,
offsetPx: -80,
});

为什么它不起作用？

为了澄清，我的问题是转向：

const menuItemsRef = {
home: "0",
packs: "4",
faq : "8",
projects: "2",            
team : "7",
contact : "6"    
}
const menuRef = useRef(Object.keys(menuItemsRef));

在这个：

const sectionRefs = [
useRef(null),
useRef(null),
useRef(null),
];

Answer 1

您正在做的创建一个包含数组的ref

useRef(Object.keys(menuItemsRef))
// { current: [...] }

你的钩子似乎期望的是一个包含refs 的数组

const sectionRefs = [
useRef(null),
useRef(null),
useRef(null),
];
// [ { current: ... }, { current: ... }, { current: ... } ]

你需要做的是保持"；属性"；reactref(其内容在渲染中持续存在的事实(，同时为其提供与您的钩子所期望的结构相匹配的结构：

const refArray = useRef(Object.values(menuItemsRef).map(value => ({current: value})))
// { current: [ { current: ... }, { current: ... }, { current: ... } ] }
const activeSectionNavbar = useScrollSpy({
sectionElementRefs: refArray.current,
offsetPx: -80,
});