如何选择样式组件并访问其属性（例如：offsetHeight）答案

【问题标题】：how to select a styled-component and access its property (ex: offsetHeight)如何选择样式组件并访问其属性（例如：offsetHeight）
【发布时间】：2019-09-23 15:52:51
【问题描述】：

我正在使用 React 和样式组件。假设我有这个组件：

...

const StyledDiv = styled.div`
  width: 100px;
  height:100px;
`

export default class MyComponent extends React.component {
  render() {
    return (
      <StyledDiv>Hello World</StyledDiv>
    )
  }
}

我想在componentDidMount() 中选择这个 div 并访问它的属性，比如 offsetHeight。

通常，我会使用 document.querySelector().offsetHeight，但我不知道样式组件的赖特方法是什么。

我试图像这样传递一个类名：

...

const StyledDiv = styled.div`
  width: 100px;
  height:100px;
`

export default class MyComponent extends React.component {

  componentDidMount() {
    const test = document.querySelector('.testDiv');
    console.log(test);
  }

  render() {
    return (
      <StyledDiv className="testDiv">Hello World</StyledDiv>
    )
  }
}

但是我得到的 console.log 输出是null。不过，我可以通过浏览器的控制台获取它...

有什么想法吗？

谢谢。

【问题讨论】：

标签： reactjs styled-components

【解决方案1】：

您可以使用普通的ref：

class App extends React.Component {
  ref = React.createRef();
  componentDidMount() {
    console.log(this.ref.current.offsetHeight);
  }
  render() {
    return <StyledDiv ref={this.ref}>Hello World</StyledDiv>;
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

working example

【讨论】：