reactjs React Ancor在重新加载时无法向下滚动

uubf1zoe  于 2023-01-25  发布在  React
关注(0)|答案(1)|浏览(102)

我正在使用React v6并尝试实现Ancors。我希望我可以获得一个副标题的链接,这样当我发送给朋友时,页面就会打开并向下滚动到副标题。我发现Ancors是用于此目的的,但找不到一个有效的解决方案。当我通过链接在页面上导航时,它工作并滚动到副标题,但如果我关闭标签并再次打开它,这次使用链接和ancor,它不滚动下来。

有人知道解决这个问题的简单方法吗?

rqqzpn5f

rqqzpn5f1#

请使用

import { useEffect } from 'react';

function ContentContainer({ header, content, descriptionExample, additiv, linkToSite, linkText }) {
  useEffect(() => {
    if (typeof window !== 'undefined') {
      // Check if the current URL has a hash
      if (window.location.hash) {
        // Get the element with the corresponding id
        const element = document.getElementById(window.location.hash.substring(1));
        if (element) {
          // Scroll to the element
          element.scrollIntoView({ behavior: 'smooth' });
        }
      }
    }
  }, []);

  return (
    <div id={header} className={style['content-container']}>
      <div onClick={() => iconClicked(header)} className={style['content-container-header']}>
        <Link smooth to={header}>{header}</Link>
        <div className={style['header-anker-icon']}>
          <InsertLinkOutlinedIcon className={style['link-icon']} />
        </div>
      </div>
      <div className={style['content-container-content']}>{content}</div>
      <img className={style['content-container-img-example']} src={example} />
      <div className={style['content-container-description']}>{descriptionExample}</div>
      <div className={style['content-container-additiv']}>{additiv}</div>
      <a className={style['content-container-link']} href={linkToSite}>
        {linkText}
        <InsertLinkOutlinedIcon className={style['link-icon']} />
      </a>
    </div>
  );
}

export default ContentContainer;

相关问题