react ref屬性的簡(jiǎn)單運(yùn)用

(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} />
    )
  }
}

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • Spring Cloud為開發(fā)人員提供了快速構(gòu)建分布式系統(tǒng)中一些常見(jiàn)模式的工具(例如配置管理,服務(wù)發(fā)現(xiàn),斷路器,智...
    卡卡羅2017閱讀 136,695評(píng)論 19 139
  • 這篇筆記主要包含 Vue 2 不同于 Vue 1 或者特有的內(nèi)容,還有我對(duì)于 Vue 1.0 印象不深的內(nèi)容。關(guān)于...
    云之外閱讀 5,186評(píng)論 0 29
  • 使用 create-react-app 快速構(gòu)建 React 開發(fā)環(huán)境 項(xiàng)目的目錄結(jié)構(gòu)如下: React JSX ...
    majun00閱讀 578評(píng)論 0 0
  • 深入JSX date:20170412筆記原文其實(shí)JSX是React.createElement(componen...
    gaoer1938閱讀 8,190評(píng)論 2 35
  • 《歡樂(lè)頌》是由東陽(yáng)正午陽(yáng)光有限公司,山東影視創(chuàng)作有限公司聯(lián)合出品的一部都市職場(chǎng)女性劇,于2016年4月18日登陸浙...
    城南阿夕閱讀 7,336評(píng)論 107 97

友情鏈接更多精彩內(nèi)容