React.JS calcula el ancho de img en DOM virtual

Estoy tratando de encontrar el ancho de un <img> para centrarlo a través de JavaScript.

Al tratar de calcular el ancho de este nodo DOM react.js se devuelve 0.

 var Player = React.createClass({ componentDidMount:function(){ var imgEl = this.refs.imgSize.getDOMNode(); console.log(imgEl.offsetWidth); }, render: function () { return ( <img ref="imgSize" src={this.props.imageURL} /> ); } }); 

Puede usar el evento onLoad la image para asegurarse de que esté cargado antes de intentar esto:

 <script src="http://fb.me/react-0.12.2.js"></script> <script src="http://fb.me/JSXTransformer-0.12.2.js"></script> <script type="text/jsx;harmony=true">void function() { "use strict"; var Player = React.createClass({ _onLoad(e) { console.log(e.target.offsetWidth) }, render() { return <img src={this.props.imageURL} onLoad={this._onLoad}/> } }) React.render(<Player imageURL="http://img.javascriptes.com/javascript/Example.jpg"/>, document.body) }()</script> 

Escribí una biblioteca React que expone un object de tamaño (con apoyos de ancho y altura) a sus componentes.

Puedes usarlo así para tu caso de uso:

 var SizeMe = require('react-sizeme'); var Player = React.createClass({ componentDidMount:function(){ var imgEl = this.refs.imgSize.getDOMNode(); console.log(imgEl.offsetWidth); }, render: function () { // height and width via props!! var width = this.props.width; var height = this.props.height; return ( <img ref="imgSize" src={this.props.imageURL} /> ); } }); // Wrap your component with the SizeMe HOC! module.exports = SizeMe()(Player); 

Demostración: https://react-sizeme-example-esbefmsitg.now.sh/

Github: https://github.com/ctrlplusb/react-sizeme