0
点赞
收藏
分享

微信扫一扫

#yyds干货盘点# 【React工作记录六十二】ant design锚点组件

Mhhao 2022-06-27 阅读 66


 前言


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


导语

ant design锚点组件

#yyds干货盘点# 【React工作记录六十二】ant design锚点组件_锚点#yyds干货盘点# 【React工作记录六十二】ant design锚点组件_数组_02​编辑

 核心代码

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>
);
}
}

#yyds干货盘点# 【React工作记录六十二】ant design锚点组件_数组_03

引用

<BaseAnchor content={content} anchors={anchors}

#yyds干货盘点# 【React工作记录六十二】ant design锚点组件_f5_04

content=1

#yyds干货盘点# 【React工作记录六十二】ant design锚点组件_锚点_05

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

#yyds干货盘点# 【React工作记录六十二】ant design锚点组件_数组_06

总结


结合ant design中得组件使用 利用弹性布局 左边传入要显示得内容 右侧利用锚点定位

实在是妙呀


 #yyds干货盘点# 【React工作记录六十二】ant design锚点组件_锚点_07#yyds干货盘点# 【React工作记录六十二】ant design锚点组件_锚点_08​编辑



举报

相关推荐

0 条评论