react - 获取要处理的图像的宽度/高度

Question

我想知道如何获取图像的高度和宽度，如果我呈现它的反应风格，所以我可以处理它以将其翻转为纵向模式，如果宽度较大比身高。

例子：https://codesandbox.io/s/k9kwv0kp93

示例代码：

index.js

import React from 'react'; 
import { render } from 'react-dom'; 
import Hello from './Hello'; 

const styles = { 
    fontFamily: 'sans-serif', 
    textAlign: 'center', 
}; 

const App =() => (
    <div style={styles}> 
    <Hello name="CodeSandbox" /> 
    <h2>Start editing to see some magic happen {'\u2728'}</h2> 
    </div> 
); 

render(<App />, document.getElementById('root')); 

Hello.js

import React, {Component} from 'react'; 

export default class Hello extends Component 
{ 
    constructor() 
    { 
    super(); 
    this.state = {img: null} 

    this.get_image = this.get_image.bind(this); 
    } 

    get_image() 
    { 
    let img = <img src="http://via.placeholder.com/350x150" alt="" />; 
    //manipulate here maybe 
    this.setState({ 
     img 
    }) 
    } 

    render() 
    { 
    return (
     <div> 
     <button onClick={this.get_image}>Click me</button> 
     test 
     {this.state.img} 
     </div> 
    ) 
    } 
} 

Answer 1

阵营支持，你可以连接到一个特殊的属性任何组件。 ref属性采用回调函数，并且在组件被挂载或卸载后立即执行回调。

当ref属性是一个HTML元素所使用，裁判回调接收底层DOM元素作为它的参数

来自https://facebook.github.io/react/docs/refs-and-the-dom.html

class MyComponent extends React.Component { 
 
    constructor(props) { 
 
    super(props); 
 
    } 
 

 
    handleSize(image) { 
 
    console.log(image.offsetWidth, image.offsetHeight) 
 
    } 
 

 
    render() { 
 
    return React.createElement("img", { 
 
     src: "http://cdn.collider.com/wp-content/uploads/2016/07/narcos-season-2-image-5.jpg", 
 
     ref: image => { 
 
     this.handleSize(image); 
 
     } 
 
    }); 
 
    } 
 
} 
 

 
ReactDOM.render(React.createElement(MyComponent, null), document.getElementById('root'))

img { 
 
    width: 200px; 
 
    height: 133px; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-with-addons.min.js"> 
 
</script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 

 
<div id="root"></div>