Получите размер реагирующего компонента?

Question

Я знаю, что я могу это сделать:

<div ref='container' /> 

, а затем

this.refs.container.getBoundingClientRect() 

, но я не могу это сделать

import Thumbnail from 'react-bootstrap/lib/Thumbnail' 
<Thumbnail ref='thumbnail' /> 
this.refs.thumbnail.getBoundingClientRect() 

потому this.refs.thumbnail не возвращает объект HTML. Как я могу получить размер миниатюры?

Answer 1

Один грязный способ сделать это, заставляя компонент иметь ref для оберточного элемента и задавая размер с помощью функции типа prop.

Ниже я воплотил в качестве примера, так как ваши потребности различны, вы можете изменить реализацию.

class ComponentWhichNeedsInfo extends Component { 

constructor(props){ 
    super(props) 
    this.state = { sizes : {} } 
    this.setSize = this.setSize.bind(this) 
} 

setSize(elUniqueName, size){ 
    this.setState({ sizes[elUniqueName] : size }) 
} 

render(){ 
    return (
    <div> 
     <Thumbnail 
     uniqueName="thumbnail1" 
     setSize={this.setSize} 
     /> 
    </div> 
    ) 
} 

} 

class Thumbnail extends Component { 
static propTypes = { 
    setSize : PropTypes.func, 
    uniqueName : PropTypes.string 
} 
componentDidMount(){ 
    let { setSize } = this.props 
    if(this.props.setSize){ 
    let { uniqueName } = this.props 
    setSize(uniqueName, this.parentNodeEl.getBoundingClientRect()) 
    } 
} 
render(){ 
    return (
    <div ref={ node => { this.parentNodeEl = node } } > 
     ... 
    </div> 
    ) 
} 

} 

Еще лучше, вы можете вместо этого предоставить свои элементы ref родительскому элементу вместо размера.