как выбрать стиль-компонент и получить доступ к его свойству (например: offsetHeight)

Question

Я использую React и styled-компоненты.Допустим, у меня есть этот компонент:

...

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

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

Я хотел бы выбрать этот div в componentDidMount() и получить доступ к его свойству, например, offsetHeight.

Обычно я бы использовал document.querySelector () .offsetHeight, но я не знаю, каков правильный подход к стилевым компонентам.

Я пытался передать className следующим образом:

...

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);

рабочий пример