antd的Anchor组件,为什么没有起作用

Question

我照着官网给的示例写的,结果并没有起作用

Answer 1

今天遇到你这个问题，弄了一下午，没有发现为什么。然后我又复制了demo，发现了一个问题：当内容超过一屏的时候，锚点才又效果。原来，锚点效果还取决与你设置的锚点的位置，当该位置超出屏幕时才会触发动作……

Answer 2

antd的Anchor是根据目标元素的id来进行锚点定位的

export default class CustomizeAnchor extends Component {
  render() {
    return (
      <Layout>
        <Sider width={200} style={{ background: "#fff" }}>
          <Anchor onClick={e => e.preventDefault()}> {/*注意：在react中使用时，如果项目中使用了hash路由，要取消默认行为，避免改变url的hash，或者也可以做相应地处理*/}
            {[...new Array(5).keys()].map(item => (
              <Link href={`#${item}`} key={item} title={item} /> // 注意Link的href属性要与目标元素的id对应
            ))}
          </Anchor>
        </Sider>
        <Content>
          {[...new Array(5).keys()].map(item => (
            <div style={{ height: 800 }} key={item}>
              <h1 id={item}>{item}</h1> // 注意目标元素的id要与Link的href对应
            </div>
          ))}
        </Content>
      </Layout>
    );
  }
}