从 react-redux 中连接的 HOC 获取包装的组件类

【问题标题】：Get wrapped component class from connected HOC in react-redux从 react-redux 中连接的 HOC 获取包装的组件类
【发布时间】：2018-09-13 13:53:33
【问题描述】：

在react-redux 中使用connect 函数时，会创建一个高阶组件。从该 HOC 的一个实例，可以访问扩展组件的包装 instance。但是，是否有可能从 HOC 类中检索包装的类？

例如：

class A extends React.Component {}

ConnectedA = connect(mapStateToProps, mapDispatch)(A);

ConnectedA.some_static_method_to_get_the_wrapped_class(); // === A

编辑：为了清楚起见，我没有ConnectedA 的实例可用。我需要一个静态方法或属性。存在吗？

【问题讨论】：

出于好奇，您想从A 实例中得到什么？
你应该read this
@Sagivb.g 感谢您的链接！然而，这不是我需要的。我需要一些可以从连接的类中检索包装类的东西，而无需任何实例。

标签： reactjs redux react-redux higher-order-components

【解决方案1】：

可以使用连接组件getWrappedInstance method 和withRef 选项来获取包装组件的引用：

this.aConnectedRef = React.createRef();

...

<ConnectedA ref={this.aConnectedRef} />

...

// after render
// this.aConnectedRef.current.getWrappedInstance() instanceof A === true

包装类本身可用作WrappedComponent 属性：

ConnectedA.WrappedComponent === A

如果需要A 静态方法，那么应该直接使用对A 类的引用，或者可以将其重构为不需要静态方法。

【讨论】：

作为一般的 FYI，请注意这个选项可能会在 React-Redux v6 中被删除，并替换为 forwardRef 选项，这将允许您更直接地获取包装组件实例的引用.