React工作64:简单的锚点封装

  render() {
    const {
      anchors = [], //锚点数组,link-节点id,title-显示文字
      content, //左侧内容
    } = 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' }}>
            {anchors.map((anchor, index) => (
              <Link href={anchor.link} key={index} title={anchor.title} />
            ))}
          </Anchor>
        </div>
      </div>
    );
  }

posted @ 2022-07-23 22:30  前端导师歌谣  阅读(64)  评论(0)    收藏  举报