React中的ref使用

本文已参与「新人创作礼」活动，一起开启掘金创作之路

• 老师说最好不要用不要用不要用，只要React.js有方法的话
• 使用方法很神奇，搞不懂含义暂且先这么记着吧： <p ref={( p)=>this.p=p}>

class Post extends Component {
  goodHeight(){
    console.log(this.p.offsetHeight);
    
  }
  render () {
  return (<p  className='pp'  ref={(p)=>this.p=p} onClick={this.goodHeight.bind(this)}> {this.props.content} </p>)
  }
}
class Index extends Component{
  render(){
    return(
      <Post content="哈哈哈hahahhahahahha哈哈哈hahahhahahahha哈哈哈hahahhahahahha哈哈哈hahahhahahahha哈哈哈hahahhahahahha"/>
    )
  }
}

ReactDOM.render(
  <Index/>,
  document.getElementById('root')
)

• 可以在index.css中添加样式进行验证

#root{
  width: 100px;
  height:200px;
  background-color: pink;
}
#root .pp{
  height:300px;
  width: 80px;
}