Child组件具有一组依赖于父项prop的ref。如果道具发生更改而没有重新呈现我的子组件,我想更新参考列表。
const childComponent = (props) =>
{
// the array of ref item list
const itemsRef = Array.from({ length: props.menuItems.length }, a =>
useRef(null));
useLayoutEffect(()=>
{
// enter anim new item ref...
},[props.menuItem])
return <ul>
{props.menuItems.map((el,i) =>
<li
key{i}
ref={itemsRef[i]}
children={el.name}
>}
</ul>
}
如果更新后的父项通过道具传递了新的menuItem列表,则 itemsRef
不会重新计算。
如何通过钩子实现这一目标?
答案 0 :(得分:1)
您正在破坏Rules of Hooks 不要在循环,条件或嵌套函数内调用Hooks
一种解决方案可能是使用useRef
声明一个instance variable它将是一个数组,然后使用ref callback
填充此数组中的元素:
const childComponent = props => {
const itemsRef = useRef([]);
// you can access the elements with itemsRef.current[n]
return (
<ul>
{props.menuItems.map((el,i) =>
<li
key={i}
ref={el => itemsRef.current[i] = el}
children={el.name}
/>
}
</ul>
);
}
如果您不希望数组中包含空值,则可以添加一个效果以使数组的长度与props.menuItems
的长度保持同步(该效果在引用后的之后回调)
useEffect(() => {
itemsRef.current = itemsRef.current.slice(0, props.menuItems.length);
}, [props.menuItems]);