(1)例子要求:完成 Post 组件,接受一个字符串的 content 作为 props,Post 会把它显示到自己的 <p> 元素内。
并且,点击 <p> 元素的时候,会使用 console.log 把元素的高度打印出来。
const Post = props => {
return (
<p ref={ p => {this.p = p} } onClick={ () => console.log(this.p.clientHeight) }>
{props.content}
</p>
)
}
( 2 ) 比如说你想进入页面以后自动 focus 到某个输入框,你需要调用 input.focus() 的 DOM API,比如说你想动态获取某个 DOM 元素的尺寸来做后续的动画
class AutoFocusInput extends Component {
componentDidMount () {
this.input.focus()
}
render () {
return (
<input ref={(input) => this.input = input} />
)
}
}