前言
我是歌谣 我有个兄弟 巅峰的时候排名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
运行结果
总结
通过map对数组进行处理 则样式即可以完成 问题解决