Refs干什么用的？

Refs 是 React 提供給我們的安全訪問 DOM 元素或者某個組件實例的句柄可以為元素添加 ref 屬性然后在回調函數中接受該元素在 DOM 樹中的句柄該值會作為回調函數的第一個參數返回。

首先需要知道的是函數組件是不可以被添加 ref 的,那是因為 ref 不是 props(屬性)。 像 key 一樣，它的處理方式不同。控制臺會出現如下warning:

那么如果想獲得HOC中所包裹的 DOM 元素或者某個組件實例時要怎么做呢？
此時便可以使用React.forwardRef明確地將 ref 轉發到內部的 DOM 元素或者某個組件。

import React, {Component} from 'react';class Test extends Component {render() {return (<div><h1/></div>)} }function TestHOC(props, ref) {return (<div><Test ref={ref}/></div>) }export React.forwardRef(TestHOC)

如果在深一層呢？比如獲取Test組件中h1，可以通過props傳遞一下:

import React, {Component} from 'react';class Test extends Component {render() {return (<div><h1 ref={this.props.forwardRef}/></div>)} }function TestHOC(props, ref) {return (<div><Test forwardRef={ref}/></div>) }export React.forwardRef(TestHOC)

獲取由connect包裹的組件實例

我們項目中經常使用redux,由此react-redux的connect便是常客了，它也是一個HOC，同時為了開發者方便使用ref有留出對應配置的api：forwardRef。低版本使用的是withRef目前高版本已經移除
https://github.com/reduxjs/react-redux/blob/master/src/components/connectAdvanced.js

const mapStateToProps = state => ({}); const mapDispatchToProps = dispatch => {}; const mergeProps = null; export default connect(mapStateToProps,mapDispatchToProps,mergeProps,{forwardRef: true} )(MyComponent)

總結

以上是生活随笔為你收集整理的HOC使用Refs的全部內容，希望文章能夠幫你解決所遇到的問題。

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