我是歌謠 放棄很容易 但是堅持一定很酷

封裝一個錨點組件就是要知道一個父子組件的一個傳值

很顯然 父親這邊傳過去一個數組 然后就可以進行循環遍歷得到一個新的數值

這邊注意 當我們進行一個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封装一个锚点组件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。