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>