Реагировать повторно оценить useRef, если реквизиты меняются - PullRequest
Новая
       1

Реагировать повторно оценить useRef, если реквизиты меняются

0 голосов
/ 09 мая 2019

Дочерний компонент имеет массив ссылок, которые зависят от родительских реквизитов.Я хотел бы обновить список ссылок, если реквизиты меняются без перерисовки моего дочернего компонента.

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>

}

itemsRef не пересчитывается, если обновленный родительский элемент передает новый список menuItem посредством реквизитов.

Как этого добиться с помощью ловушек?

1 Ответ

1 голос
/ 09 мая 2019

Вы нарушаете Правила хуков Не вызывайте хуки внутри циклов, условий или вложенных функций

Решением может быть использование useRef для объявления переменной экземпляра , которая будет массивом, и использование 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 (эффект будет называться после обратных вызовов refs) 

useEffect(() => {
  itemsRef.current = itemsRef.current.slice(0, props.menuItems.length);
}, [props.menuItems]);
...