【React】在不定高的情况下，实现锚点的跳转

锚点跳转的JSX代码

        <div className={'anchor-box'}>
            <div className={'anchor-link fixedTop'}>

              <Anchor
                onChange={() => {
                 
                }}
                getContainer={()=>document.querySelector('.layout-box') as HTMLElement}
                affix={true}
                getCurrentAnchor={()=>'anchor-deploy'}
                onClick={clickAnchor}
              >
              
                <Anchor.Link href="anchor-1" title="锚点1" className={'mb-16'}/>
                <Anchor.Link href="anchor-2" title="锚点2" className={'mb-16'}/>
                <Anchor.Link href="anchor-3" title="锚点3" />

              </Anchor>
            </div>

注：Anchor.Link设置的href和在页面对应DOM元素设置对应的id，是一一对应的。（这里省略了DOM元素对应的id的HTML代码，只要是在.layout-box内的DOM元素即可）

css

//...
.fixedTop{
  position: fixed;
}
// 高度不限制，继承父容器的100%
.anchor-box{
	 width: 150px;
    margin: 16px 0 78px 0;
    padding: 16px 24px;
    overflow: auto;
    background: #fff;
}

const clickAnchor = (
    e: any,
    link: {
      title: React.ReactNode
      href: string
    }
  ) => {
    e.preventDefault()
    let anchorElement = document.getElementById(link.href);
    // 如果对应id的锚点存在，就跳转到锚点
    if(anchorElement) { 
    anchorElement.scrollIntoView({block: 'start', behavior: 'smooth'}); 
    }
  }