Solución:
A continuación se muestra un ejemplo actualizado de ES6 utilizando una ref.
Recuerde que tenemos que usar un componente de la clase React ya que necesitamos acceder al método Lifecycle componentDidMount()
porque solo podemos determinar la altura de un elemento después de que se representa en el 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'))
Puede encontrar el ejemplo de ejecución aquí: https://codepen.io/bassgang/pen/povzjKw
Para aquellos que estén interesados en usar react hooks
, esto podría ayudarlo a comenzar.
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>
)
}
Ver este violín (en realidad actualizó el suyo)
Necesitas engancharte componentDidMount
que se ejecuta después del método render. Allí, obtienes la altura real del elemento.
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>
¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)