如何使用带有样式化组件的组件来操纵dom

Question

在第37行，我试图从元素中找出OffsetTop。

当我将AnchorView更改为Div而不是View时。我不知道如何使用带样式的组件来操纵组件的dom属性。

import React, {Component, Fragment} from 'react';
import styled from 'styled-components';
import { View } from './compoments/View'; 

class App extends Component {

handleScroll = (id) => {
   const container = this.refs.container;
   const element = this.refs[id];
   console.info('elements', this.refs);
   scrollTo(container, element, 600);
}

render() {
  return(
    <Fragment>
    <Container ref="container">
      {Test.map((index) => <AnchorItem key={index+1} ref={'anchor'+index} id= . 
      {'anchor'+index}>{index}</AnchorItem>)}
    </Container>
    <Menu>
      <input type="button" value="input" onClick={() => this.handleScroll('anchor0')} />
      <input type="button" value="input" onClick={() => this.handleScroll('anchor1')} />
      <input type="button" value="input" onClick={() => this.handleScroll('anchor3')} />
      <input type="button" value="input" onClick={() => this.handleScroll('anchor4')} />
    </Menu>
  </Fragment>
    )
  };
}


 const Container = styled('div')`
    margin: 40px auto;
    height: 150px;
    width: 600px;
    border: 1px solid black;
    overflow: auto;
        `;

 const AnchorItem = styled(View)`
    margin: auto;
    height: 200px;
    width: 500px;
    border: 1px solid black;
    overflow: auto;
    height: 80px;
    background: blue;
    list-style: none;
    margin:.5rem;
    color: white;
`;

const Menu = styled('div')`
    margin: 50px auto;
    width: 600px;
    height: 50px;
`;

export default App;
`

有人可以帮助我吗？预先感谢。