reactjs - 反应 scrollIntoView() 不适用于 ref

Question

我有一个反应功能组件定义为

    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

我正在尝试使用 ref 使选定的列表项滚动到视图中，但无法获得预期的结果。但是，如果我尝试在挂钩处添加调试断点，它会按预期工作并在视口中滚动元素。

我还尝试将我的 scrollIntoView 包装在 setTimeout() 中，该方法有效，但它不止一次地滚动它并导致不和谐的效果。