使用componentDidUpdate自动滚动定位标签元素

Question

• 我的URL

https://abc1234.com/users#api-doc

• HTML

    <div className={parent}>
        <div className={child}>
            {someContent}
            <a id="api-doc">Hello API</a>
        </div>
    </div>

我正在用ReactJS写这一页。我需要实现一种方法，这样页面应该自动向下滚动到哈希，即api-doc，但不知怎么的，它不是在页面加载时自动滚动(非常第一次)。

我试过这样的解决办法

    componentDidUpdate(){
        let id = this.props.history.location.hash.replace("#", "");
        let element = document.getElementById(id);
        setTimeout(() => {
            if (element) {
                element.scrollIntoViewIfNeeded(true);
            }
        }, 200);
    }

它起作用了，但我正在寻找一种更好的方法来实现同样的目标

换句话说，我不想使用setTimeOut。

我添加setTimeOut是因为我发现document.getElementById(id)是空的(第一次)，我假设componentDidUpdate在整个呈现之前运行。我也使用过dangerouslySetInnerHTML。

Answer 1

document.getElementById(id)返回null是正确的，因为元素尚未呈现。

使用React不要使用document.getElementById()。React节点本身不是真正的DOM节点(例如，文本或元素节点)，而是潜在DOM节点的表示。

相反，使用钩子useRef() 反应文件

创建以下组件。

import React, { useRef, useEffect }  from 'react';

const myComponent = (props) => {

  const myRef = useRef();

  function scrollToComponent() {
    if (window.location.hash === '#api-doc') {
      myRef.current.scrollIntoView();
      myRef.current.focus();
    }
  }

  useEffect( () => scrollToComponent(), [] )

  return (
    <div ref={myRef} id="api-doc">
       ...
    </div>
  )
};

export default myComponent;

使用useEffect将(仅)在组件挂载时触发。(因此，避免在组件挂载之前运行JS的问题)

我命名为scrollToComponent的函数将检查URL中的散列，如果它传递条件，它将滚动到ref。

记住将组件导入到主文件中。

*注:使用来自React路由器的链接可能是一个更好的解决方案。(但我对此并不熟悉)