react-redux的connect與React.forwardRef結合ref失效的解決

更新時間：2023年05月12日 08:59:11 作者：隨風丶逆風

這篇文章主要介紹了react-redux的connect與React.forwardRef結合ref失效的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

react-redux的connect與React.forwardRef結合ref失效

開發(fā)中遇到connect包裹forwardRef組件后，ref引用失效，返回undefined的問題。

const CompA = React.forwardRef<OutputInterface, IProps>((props, ref) => {
? // ...
})
export default connect(mapStateToProps, mapDispatchToProps)(CompA);

原因

源碼：React.forwardRef

從下面截取的源碼中，可以看到forwardRef返回的是一個元素對象，包含了元素的類型REACT_FORWARD_REF_TYPE，以及渲染組件函數(shù)render方法，而connect需要的是組件，故透傳出現(xiàn)問題。

import {REACT_FORWARD_REF_TYPE, REACT_MEMO_TYPE} from 'shared/ReactSymbols';
export function forwardRef<Props, ElementType: React$ElementType>(
? render: (props: Props, ref: React$Ref<ElementType>) => React$Node,
) {
? // 省略邊界條件判斷
? const elementType = {
? ? $$typeof: REACT_FORWARD_REF_TYPE,
? ? render,
? };
? if (__DEV__) {
? ? let ownName;
? ? Object.defineProperty(elementType, 'displayName', {
? ? ? enumerable: false,
? ? ? configurable: true,
? ? ? get: function() {
? ? ? ? return ownName;
? ? ? },
? ? ? set: function(name) {
? ? ? ? ownName = name;
? ? ? ? if (!render.name && !render.displayName) {
? ? ? ? ? render.displayName = name;
? ? ? ? }
? ? ? },
? ? });
? }
? return elementType;
}

解決辦法

方法一：調用forwardRef返回值中的render方法

const CompA = React.forwardRef<OutputInterface, IProps>((props, ref) => {
? // ...
})
// 直接通過render獲取渲染組件
export default connect(mapStateToProps, mapDispatchToProps)(CompA.render);

方法二：connect第4個參數(shù)可以設置{forwardRef: true}實現(xiàn)透傳

const CompA = React.forwardRef<OutputInterface, IProps>((props, ref) => {
? // ...
})
// 直接通過render獲取渲染組件
export default connect(mapStateToProps, mapDispatchToProps, null, {
? forwardRef: true
})(CompA);