学会使用ant design封装一个锚点组件

我是歌谣 放弃很容易 但是坚持一定很酷

封装一个锚点组件就是要知道一个父子组件的一个传值

很显然 父亲这边传过去一个数组 然后就可以进行循环遍历得到一个新的数值

这边注意 当我们进行一个map返回值得时候一定需要一个

（）或者return就可以实现了

这是一个简单的父子组件传值

可以对比一下vue进行学习

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 href={anchor.link} key={index} title={anchor.title} />))}</Anchor></div></div>);} }

总结

以上是生活随笔为你收集整理的学会使用ant design封装一个锚点组件的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。