现象说明：我们在组件的相互通信时，有时候会用到通过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<DispatchProp>;
<TStateProps = {}, no_dispatch = {}, TOwnProps = {}, State = {}>(
mapStateToProps: MapStateToPropsParam<TStateProps, TOwnProps, State>
): InferableComponentEnhancerWithProps<TStateProps & DispatchProp, TOwnProps>;
<no_state = {}, TDispatchProps = {}, TOwnProps = {}>(
mapStateToProps: null | undefined,
mapDispatchToProps: MapDispatchToPropsNonObject<TDispatchProps, TOwnProps>
): InferableComponentEnhancerWithProps<TDispatchProps, TOwnProps>;
<no_state = {}, TDispatchProps = {}, TOwnProps = {}>(
mapStateToProps: null | undefined,
mapDispatchToProps: MapDispatchToPropsParam<TDispatchProps, TOwnProps>,
): InferableComponentEnhancerWithProps<
ResolveThunks<TDispatchProps>,
TOwnProps
>;
<TStateProps = {}, TDispatchProps = {}, TOwnProps = {}, State = {}>(
mapStateToProps: MapStateToPropsParam<TStateProps, TOwnProps, State>,
mapDispatchToProps: MapDispatchToPropsNonObject<TDispatchProps, TOwnProps>
): InferableComponentEnhancerWithProps<TStateProps & TDispatchProps, TOwnProps>;
<TStateProps = {}, TDispatchProps = {}, TOwnProps = {}, State = {}>(
mapStateToProps: MapStateToPropsParam<TStateProps, TOwnProps, State>,
mapDispatchToProps: MapDispatchToPropsParam<TDispatchProps, TOwnProps>,
): InferableComponentEnhancerWithProps<
TStateProps & ResolveThunks<TDispatchProps>,
TOwnProps
>;
<no_state = {}, no_dispatch = {}, TOwnProps = {}, TMergedProps = {}>(
mapStateToProps: null | undefined,
mapDispatchToProps: null | undefined,
mergeProps: MergeProps<undefined, undefined, TOwnProps, TMergedProps>,
): InferableComponentEnhancerWithProps<TMergedProps, TOwnProps>;
<TStateProps = {}, no_dispatch = {}, TOwnProps = {}, TMergedProps = {}, State = {}>(
mapStateToProps: MapStateToPropsParam<TStateProps, TOwnProps, State>,
mapDispatchToProps: null | undefined,
mergeProps: MergeProps<TStateProps, undefined, TOwnProps, TMergedProps>,
): InferableComponentEnhancerWithProps<TMergedProps, TOwnProps>;
<no_state = {}, TDispatchProps = {}, TOwnProps = {}, TMergedProps = {}>(
mapStateToProps: null | undefined,
mapDispatchToProps: MapDispatchToPropsParam<TDispatchProps, TOwnProps>,
mergeProps: MergeProps<undefined, TDispatchProps, TOwnProps, TMergedProps>,
): InferableComponentEnhancerWithProps<TMergedProps, TOwnProps>;
<TStateProps = {}, no_dispatch = {}, TOwnProps = {}, State = {}>(
mapStateToProps: MapStateToPropsParam<TStateProps, TOwnProps, State>,
mapDispatchToProps: null | undefined,
mergeProps: null | undefined,
options: Options<State, TStateProps, TOwnProps>
): InferableComponentEnhancerWithProps<DispatchProp & TStateProps, TOwnProps>;
<TStateProps = {}, TDispatchProps = {}, TOwnProps = {}>(
mapStateToProps: null | undefined,
mapDispatchToProps: MapDispatchToPropsNonObject<TDispatchProps, TOwnProps>,
mergeProps: null | undefined,
options: Options<{}, TStateProps, TOwnProps>
): InferableComponentEnhancerWithProps<TDispatchProps, TOwnProps>;
<TStateProps = {}, TDispatchProps = {}, TOwnProps = {}>(
mapStateToProps: null | undefined,
mapDispatchToProps: MapDispatchToPropsParam<TDispatchProps, TOwnProps>,
mergeProps: null | undefined,
options: Options<{}, TStateProps, TOwnProps>
): InferableComponentEnhancerWithProps<
ResolveThunks<TDispatchProps>,
TOwnProps
>;
<TStateProps = {}, TDispatchProps = {}, TOwnProps = {}, State = {}>(
mapStateToProps: MapStateToPropsParam<TStateProps, TOwnProps, State>,
mapDispatchToProps: MapDispatchToPropsNonObject<TDispatchProps, TOwnProps>,
mergeProps: null | undefined,
options: Options<State, TStateProps, TOwnProps>
): InferableComponentEnhancerWithProps<TStateProps & TDispatchProps, TOwnProps>;
<TStateProps = {}, TDispatchProps = {}, TOwnProps = {}, State = {}>(
mapStateToProps: MapStateToPropsParam<TStateProps, TOwnProps, State>,
mapDispatchToProps: MapDispatchToPropsParam<TDispatchProps, TOwnProps>,
mergeProps: null | undefined,
options: Options<State, TStateProps, TOwnProps>
): InferableComponentEnhancerWithProps<
TStateProps & ResolveThunks<TDispatchProps>,
TOwnProps
>;
<TStateProps = {}, TDispatchProps = {}, TOwnProps = {}, TMergedProps = {}, State = {}>(
mapStateToProps: MapStateToPropsParam<TStateProps, TOwnProps, State>,
mapDispatchToProps: MapDispatchToPropsParam<TDispatchProps, TOwnProps>,
mergeProps: MergeProps<TStateProps, TDispatchProps, TOwnProps, TMergedProps>,
options?: Options<State, TStateProps, TOwnProps, TMergedProps>
): InferableComponentEnhancerWithProps<TMergedProps, TOwnProps>;
// tslint:enable:no-unnecessary-generics
}
// 我们看到这些个函数，不同的入参。我们只要看options就可以。
// options指向 Options
...
export interface Options<State = {}, TStateProps = {}, TOwnProps = {}, TMergedProps = {}> 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 库中引入
网友评论