前言

我是歌谣我有个兄弟巅峰的时候排名c站总榜19 叫前端小歌谣曾经我花了三年的时间创作了他现在我要用五年的时间超越他今天又是接近兄弟的一天人生难免坎坷大不了从头再来歌谣的意志是永恒的放弃很容易但是坚持一定很酷

导语

今天是继续做开源项目的一天今天封装了一个锚点的切换功能继续上代码

代码部分

/*
 * @Description: 锚点组件
 * @FilePath: \pinlor-yoao-static-pc-platform\src\common\components
\BaseAnchor\index.js
 */
import React, { Component } from 'react';
import { Row, Col, Anchor } from 'antd';

const { Link } = Anchor;

 class BaseAnchor extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  render() {
    const {
      anchors = [], //锚点数组，link-节点id，title-显示文字
      content, //左侧内容
      ...restProps
    } = this.props;
    return (
      <div style={{ display: 'flex' }}>
        <div style={{ flex: 9, overflow: 'hidden' }}>{content ||
 this.props.children}</div>
        <div style={{ flex: 1 }}>
          <Anchor offsetTop={122} style={{ marginLeft: 24, 
background: '#F2F0F5' }} {...restProps}>
            {anchors.map((anchor, index) => (
              <Link href={anchor.link} key={index} 
title={anchor.title} />
            ))}
          </Anchor>
        </div>
      </div>
    );
  }
}

export default BaseAnchor