web-dev-qa-db-fra.com

ReactJS - Obtenir la hauteur d'un élément

Comment puis-je obtenir la hauteur d'un élément après que React a rendu cet élément?

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

RÉSULTAT

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

Il calcule la hauteur du conteneur avant le rendu (36px). Je veux obtenir la hauteur après le rendu. Le bon résultat devrait être 18px dans ce cas. jsfiddle

javascriptreactjs
78
faia20

Voir this violon (fait votre mise à jour)

Vous devez accrocher componentDidMount qui est exécuté après la méthode de rendu. Là, vous obtenez la hauteur réelle de l'élément.

21
Andreyco

Voici un exemple ES6 à jour utilisant un ref .

N'oubliez pas que nous devons utiliser un composant de la classe React car nous devons accéder à la méthode Lifecycle componentDidMount(), car nous ne pouvons déterminer la hauteur d'un élément qu'après son rendu dans le DOM.

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

Vous pouvez trouver l'exemple en cours ici: https://www.webpackbin.com/bins/-KkP1HhC_tW4FeoYSuDe

122
Paul Vincent Beigang

Pour ceux qui souhaitent utiliser react hooks, cela pourrait vous aider à démarrer.

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>
  )
}
32
Mr. 14

Vous voudriez également utiliser les références sur l'élément au lieu d'utiliser document.getElementById, c'est un peu plus robuste.

8
yoyodunno

J'ai trouvé le paquet npm utile https://www.npmjs.com/package/element-resize-detector

Un auditeur optimisé de redimensionnement multi-navigateur pour les éléments.

Peut être utilisé avec le composant React ou le composant fonctionnel (particulièrement utile pour les hooks de réaction)

0
qmn1711