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

执行此操作的一种肮脏方法，使组件具有包装元素的参考，并通过函数类型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>
   )
 } 

}

更好的是，您可能会将您的元素引用为父元素而不是大小。

获得反应组件的大小？

1 个答案: