(1)例子要求:完成 Post 組件,接受一個(gè)字符串的 content 作為 props,Post 會(huì)把它顯示到自己的 <p> 元素內(nèi)。
并且,點(diǎn)擊 <p> 元素的時(shí)候,會(huì)使用 console.log 把元素的高度打印出來(lái)。
const Post = props => {
return (
<p ref={ p => {this.p = p} } onClick={ () => console.log(this.p.clientHeight) }>
{props.content}
</p>
)
}
( 2 ) 比如說(shuō)你想進(jìn)入頁(yè)面以后自動(dòng) focus 到某個(gè)輸入框,你需要調(diào)用 input.focus() 的 DOM API,比如說(shuō)你想動(dòng)態(tài)獲取某個(gè) DOM 元素的尺寸來(lái)做后續(xù)的動(dòng)畫
class AutoFocusInput extends Component {
componentDidMount () {
this.input.focus()
}
render () {
return (
<input ref={(input) => this.input = input} />
)
}
}