如何 select 样式化组件并访问其属性（例如：offsetHeight）

Question

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

...

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

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

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

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

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

...

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。不过，我可以通过浏览器的控制台获取它...

有什么想法吗？

谢谢。

Answer 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

如何 select 样式化组件并访问其属性（例如：offsetHeight）

how to select a styled-component and access its property (ex: offsetHeight)

reactjs

styled-components

如何 select 样式化组件并访问其 属性（例如：offsetHeight）

how to select a styled-component and access its property (ex: offsetHeight)

reactjs

styled-components

如何 select 样式化组件并访问其属性（例如：offsetHeight）