• 通過React.createRef → ref對象
• 通過元素的ref屬性可以附加到React元素上
• 一般通過構造器中給this的屬性賦值一個ref，方便整個組件使用
• ref只要傳遞到react元素中，就可以利用ref的current屬性訪問到該真實DOM節點
• ref在componentDidMount和componentDidUpdate觸發前更新

current里是null的現象

• 由于打印時，this.modalRef才剛剛聲明，current是null，但是current是個引用值，展開時訪問的是最后的結果

class Modal extends React.Component {constructor(props) {super(props)this.modalRef = React.createRef()console.log('剛創建時', this.modalRef)}componentDidMount() {console.log('componentDidMount', this.modalRef)}componentDidUpdate() {console.log('componentDidUpdate', this.modalRef)}render() {return (<divref={this.modalRef}style={{width: '300px',border: '1px solid #000',display: this.props.toOpen ? 'block' : 'none'}}><h1>This is a Modal</h1><p>This is a super Modal</p></div>)} }

ref有不同的使用方式

• ref放在html元素上 → current: 真實DOM
• ref放在class組價上 → current: 組件實例
• ref放在函數組件（沒有實例）→ 無法附加到組件上

class App extends React.Component {constructor(props) {super(props)this.refInApp = React.createRef()}state = {toOpen: false,}componentDidMount() {console.log('【APP】componentDidMount', this.refInApp)}changeStatus = (toOpen) => {this.setState({toOpen})}render() {return (<><Modal toOpen={this.state.toOpen} ref={this.refInApp} /><button onClick={() => this.changeStatus(true)}>打開</button><button onClick={() => this.changeStatus(false)}>關閉</button></>)} }

函數組件使用hooks獲取dom實例

function Test() {const divRef = React.useRef(null)React.useEffect(() => {console.log('函數組件使用hooks獲取ref', divRef)}, [])return (<div ref={divRef}>Test函數組件</div>) }

• 若試圖在函數組價上傳ref屬性會告警

<Test ref={this.refInApp} />

總結

以上是生活随笔為你收集整理的24 React.createRef()用法细节分析的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。