如果道具发生变化,请重新评估useRef

时间:2019-05-09 13:52:13

标签: javascript reactjs react-hooks

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不会重新计算。

如何通过钩子实现这一目标?

1 个答案:

答案 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]);