Блог

У меня есть функциональный компонент react, определенный как

     export const NavMenuHorizontal: React.FunctionComponent<NavMenuProps> = (
      props
    ) => {         
        const selectedItemRef = React.createRef<HTMLDivElement>();
        React.useEffect(() => {
          selectedItemRef.current?.scrollIntoView({
            behavior: "smooth",
            inline: "center",
          })
        });

        return (
              <List>
              {map(...) => (
                  <div ref={isActive ? selectedItemRef : undefined}>
                     some text 
                  </div>
               )}
              </List>
        );
    };
//isActive is true for only one item in the map
  

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

Я также попытался обернуть свой scrollIntoView внутри setTimeout(), который работает, но прокручивает его более одного раза и приводит к резкому эффекту.