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

Posted 2021-10-10 前端小歌谣

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

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

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

这边注意 当我们进行一个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 offse