【React工作记录六十二】ant design锚点组件

import React, { Component } from 'react';
import { Row, Col, Anchor } from 'antd';
const { Link } = Anchor;
export default 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
                key={index}
                href={anchor.link || anchor.href}
                title={anchor.title || anchor.name}
              />
            ))}
          </Anchor>
        </div>
      </div>
    );
  }
}

anchors = [
        { link: '#agent-detail-ticheng-info', title: '提成单申请信息' },
        // { link: '#agent-detail-contacter', title: '联系人' },
        { link: '#agent-detail-ticheng-message', title: '提成申请信息' },
      ];