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

Question

我正在尝试找到 <img> 的宽度以通过 JavaScript 将其居中。

正在尝试计算此 react.js DOM 节点的宽度 returns 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} />
    );
  }
});

Answer 1

您可以使用图像的 onLoad 事件来确保它在尝试之前已加载：

<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://upload.wikimedia.org/wikipedia/en/a/a9/Example.jpg"/>, document.body)

}()</script>

Answer 2

我编写了一个 React 库，它向您的组件公开一个 size 对象（带有宽度和高度属性）。

您可以像这样在您的用例中使用它：

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

演示：https://react-sizeme-example-esbefmsitg.now.sh/

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

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

React.JS calculating img width in virtual DOM

javascript

reactjs

react-jsx