Javascript React.JS计算虚拟DOM中的img宽度

我试图找到

);
}
});

您可以使用图像的

onLoad

事件来确保在尝试此操作之前已加载图像：

void函数（）{“严格使用”；
var Player=React.createClass({
_空载（e）{
console.log（e.target.offsetWidth）
},
render（）{
返回
}
})
React.render（，document.body）
}（）

我编写了一个React库，它向组件公开一个大小对象（带有宽度和高度道具）

您可以将其用于您的用例：

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

var-SizeMe=require（'react-SizeMe'）；
var Player=React.createClass({
componentDidMount:function（）{
var imgEl=this.refs.imgSize.getDOMNode（）；
控制台日志（imgEl.offsetWidth）；
},
渲染：函数（）{
//高度和宽度通过道具！！
var width=this.props.width；
var height=this.props.height；
返回(
);
}
});
//用SizeMe HOC包装您的组件！
module.exports=SizeMe（）（播放器）；

演示：

Github：

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