javascript - ReactJS - Få høyden på et element

Hvordan kan jeg få høyden på et element etter at React har rendret det elementet?

HTML

<div id="container">
<!-- This element's contents will be replaced with your component. -->
<p>
jnknwqkjnkj<br>
jhiwhiw (this is 36px height)
</p>
</div>

ReactJS

var DivSize = React.createClass({

  render: function() {
    let elHeight = document.getElementById('container').clientHeight
    return <div className="test">Size: <b>{elHeight}px</b> but it should be 18px after the render</div>;
  }
});

ReactDOM.render(
  <DivSize />,
  document.getElementById('container')
);

RESULTAT

Size: 36px but it should be 18px after the render

Den beregner beholderens høyde før gjengivelsen (36px). Jeg vil få høyden etter gjengivelsen. Det riktige resultatet skal være 18px i dette tilfellet. jsfiddle

Svar #1

For de som er interessert i å bruke react hooks, kan dette hjelpe deg med å komme i gang.

import React, { useState, useEffect, useRef } from 'react'

export default () => {
  const [height, setHeight] = useState(0)
  const ref = useRef(null)

  useEffect(() => {
    setHeight(ref.current.clientHeight)
  })

  return (
    <div ref={ref}>
      {height}
    </div>
  )
}

Svar #2

Følgende er et oppdatert ES6-eksempel som bruker en ref.

Husk at vi må bruke en React-klassekomponent siden vi trenger å få tilgang til livssyklusmetoden componentDidMount() fordi vi kun kan bestemme høyden på et element etter at det er rendret i DOM-en.

import React, {Component} from 'react'
import {render} from 'react-dom'

class DivSize extends Component {

  constructor(props) {
    super(props)

    this.state = {
      height: 0
    }
  }

  componentDidMount() {
    const height = this.divElement.clientHeight;
    this.setState({ height });
  }

  render() {
    return (
      <div 
        className="test"
        ref={ (divElement) => { this.divElement = divElement } }
      >
        Size: <b>{this.state.height}px</b> but it should be 18px after the render
      </div>
    )
  }
}

render(<DivSize />, document.querySelector('#container'))

Du kan finne det kjørende eksemplet her: https://codepen.io/bassgang/pen/povzjKw

Svar #3

Se på denne fiolinen (faktisk oppdatert din)

Du må koble til componentDidMount som kjøres etter render-metoden. Der får du den faktiske høyden på elementet.

var DivSize = React.createClass({
    getInitialState() {
    return { state: 0 };
  },

  componentDidMount() {
    const height = document.getElementById('container').clientHeight;
    this.setState({ height });
  },

  render: function() {
    return (
        <div className="test">
        Size: <b>{this.state.height}px</b> but it should be 18px after the render
      </div>
    );
  }
});

ReactDOM.render(
  <DivSize />,
  document.getElementById('container')
);

<script src="https://facebook.github.io/react/js/jsfiddle-integration-babel.js"></script>

<div id="container">
<p>
jnknwqkjnkj<br>
jhiwhiw (this is 36px height)
</p>
    <!-- This element's contents will be replaced with your component. -->
</div>

Svar #4

I stedet for å bruke document.getElementById(...), er en bedre (oppdatert) løsning å bruke React useRef-hooken som lagrer en referanse til komponenten/elementet, kombinert med en useEffect-hook, som utløses ved komponentrendringer.

import React, {useState, useEffect, useRef} from 'react';

export default App = () => {
  const [height, setHeight] = useState(0);
  const elementRef = useRef(null);

  useEffect(() => {
    setHeight(elementRef.current.clientHeight);
  }, []); //empty dependency array so it only runs once at render

  return (
    <div ref={elementRef}>
      {height}
    </div>
  )
}

Svar #5

det kan vise null. setTimeout hjelper med å få riktig verdi og oppdatere tilstanden.

import React, { useState, useEffect, useRef } from 'react'
    
    export default () => {
      const [height, setHeight] = useState(0)
      const ref= useRef(null)
    
      useEffect(() => {
       if(ref.current.clientHeight){
         setTimeout(() => {
           setHeight(ref.current.clientHeight) 
         }, 1000)
       }
      })
    
      return (
        <div ref={ref}>
          {height}
        </div>
      )
    }

Svar #6

Du vil også bruke refs på elementet i stedet for å bruke document.getElementById, det er bare en litt mer robust ting.