react-native组件绑定了redux导致通过ref无法获取到组件内部方法

现象说明：我们在组件的相互通信时，有时候会用到通过ref调用组件内部方法，在使用时发现在有些时候通过ref可以获取到该节点，却无法获取到内部的自定义方法。

先说解决办法

网上看到的解决办法，实测可以解决，(已过时，至少react-redux 7.1.3会报错)

更新时间2019年/12月/11日

最近使用react-native发现还按照下面的方法使用时，会报错。
react-native：0.59.1
react-redux: 7.1.3

*** withRef is removed. To access the wrapped instance, use a ref on the connected component ***
先贴上解决办法：

// 最原始的导出一个绑定到redux的组件 ，无法导出内部属性
// export default connect(mapStateToProps, mapActionToProps)(App);
// 以前版本可以导出内部属性的改动
export default connect(mapStateToProps, mapActionToProps, null, {withRef: true})(App);
// 最新react-redux可以导出内部属性的改动
export default connect(mapStateToProps, mapActionToProps, null, {forwardRef: true})(App);

看着只是一个key值的改动。
但最下面的方法我之前是试过的，所以肯定是因为react-redux插件版本不一样导致的报错。
查看connect函数源码，点击connect函数。

export const connect: Connect;
...
export interface Connect {
    // tslint:disable:no-unnecessary-generics
    (): InferableComponentEnhancer;

    (
        mapStateToProps: MapStateToPropsParam
    ): InferableComponentEnhancerWithProps;

    (
        mapStateToProps: null | undefined,
        mapDispatchToProps: MapDispatchToPropsNonObject
    ): InferableComponentEnhancerWithProps;

    (
        mapStateToProps: null | undefined,
        mapDispatchToProps: MapDispatchToPropsParam,
    ): InferableComponentEnhancerWithProps<
        ResolveThunks,
        TOwnProps
    >;

    (
        mapStateToProps: MapStateToPropsParam,
        mapDispatchToProps: MapDispatchToPropsNonObject
    ): InferableComponentEnhancerWithProps;

    (
        mapStateToProps: MapStateToPropsParam,
        mapDispatchToProps: MapDispatchToPropsParam,
    ): InferableComponentEnhancerWithProps<
        TStateProps & ResolveThunks,
        TOwnProps
    >;

    (
        mapStateToProps: null | undefined,
        mapDispatchToProps: null | undefined,
        mergeProps: MergeProps,
    ): InferableComponentEnhancerWithProps;

    (
        mapStateToProps: MapStateToPropsParam,
        mapDispatchToProps: null | undefined,
        mergeProps: MergeProps,
    ): InferableComponentEnhancerWithProps;

    (
        mapStateToProps: null | undefined,
        mapDispatchToProps: MapDispatchToPropsParam,
        mergeProps: MergeProps,
    ): InferableComponentEnhancerWithProps;

    (
        mapStateToProps: MapStateToPropsParam,
        mapDispatchToProps: null | undefined,
        mergeProps: null | undefined,
        options: Options
    ): InferableComponentEnhancerWithProps;

    (
        mapStateToProps: null | undefined,
        mapDispatchToProps: MapDispatchToPropsNonObject,
        mergeProps: null | undefined,
        options: Options<{}, TStateProps, TOwnProps>
    ): InferableComponentEnhancerWithProps;

    (
        mapStateToProps: null | undefined,
        mapDispatchToProps: MapDispatchToPropsParam,
        mergeProps: null | undefined,
        options: Options<{}, TStateProps, TOwnProps>
    ): InferableComponentEnhancerWithProps<
        ResolveThunks,
        TOwnProps
    >;

    (
        mapStateToProps: MapStateToPropsParam,
        mapDispatchToProps: MapDispatchToPropsNonObject,
        mergeProps: null | undefined,
        options: Options
    ): InferableComponentEnhancerWithProps;

    (
        mapStateToProps: MapStateToPropsParam,
        mapDispatchToProps: MapDispatchToPropsParam,
        mergeProps: null | undefined,
        options: Options
    ): InferableComponentEnhancerWithProps<
        TStateProps & ResolveThunks,
        TOwnProps
    >;

    (
        mapStateToProps: MapStateToPropsParam,
        mapDispatchToProps: MapDispatchToPropsParam,
        mergeProps: MergeProps,
        options?: Options
    ): InferableComponentEnhancerWithProps;
    // tslint:enable:no-unnecessary-generics
}
// 我们看到这些个函数，不同的入参。我们只要看options就可以。
// options指向 Options
...
export interface Options extends ConnectOptions {
    /**
     * If true, implements shouldComponentUpdate and shallowly compares the result of mergeProps,
     * preventing unnecessary updates, assuming that the component is a “pure” component
     * and does not rely on any input or state other than its props and the selected Redux store’s state.
     * Defaults to true.
     * @default true
     */
    pure?: boolean;

    /**
     * When pure, compares incoming store state to its previous value.
     * @default strictEqual
     */
    areStatesEqual?: (nextState: State, prevState: State) => boolean;

    /**
     * When pure, compares incoming props to its previous value.
     * @default shallowEqual
     */
    areOwnPropsEqual?: (nextOwnProps: TOwnProps, prevOwnProps: TOwnProps) => boolean;

    /**
     * When pure, compares the result of mapStateToProps to its previous value.
     * @default shallowEqual
     */
    areStatePropsEqual?: (nextStateProps: TStateProps, prevStateProps: TStateProps) => boolean;

    /**
     * When pure, compares the result of mergeProps to its previous value.
     * @default shallowEqual
     */
    areMergedPropsEqual?: (nextMergedProps: TMergedProps, prevMergedProps: TMergedProps) => boolean;

    /**
     * If true, use React's forwardRef to expose a ref of the wrapped component
     *
     * @default false
     */
    forwardRef?: boolean;
}

看上面的源码我们就能看到 forwardRef这个了。
其余的以后再将。

---

发现问题过程

经过与能正常使用ref的组件对比发现是以下代码导致的

const mapStateToProps =(state) => ({
  login: state.login,
});
const mapActionToProps =(dispatch) => ({
  loginAction: bindActionCreators(LoginAction, dispatch),
});

// export default connect(mapStateToProps, mapActionToProps)(App);

// 修改为下行代码就可以通过ref获取到内部函数
export default connect(mapStateToProps, mapActionToProps, null, {withRef: true})(App);

应该是connect函数导致export的组件的问题。
connect 是从 react-redux 库中引入

查看connect函数代码