React Redux中使用connect导出组件后无法访问组件方法

你通过connect高阶组件包裹了ContactList类组件，此时直接给ContactList加ref，获取到的是connect返回的包装组件实例，而非你编写的ContactList原始实例，因此无法访问到内部的renderContacts方法。

方案1：react-redux v6+ 用forwardRef配置 #

修改ContactList的导出代码，给connect添加forwardRef: true配置，让ref穿透到原始组件：

class ContactList extends Component {
  // ... 原有代码不变
}

const mapStateToProps = state => ({ contacts: state.contacts })

// 添加forwardRef配置
export default connect(mapStateToProps, null, null, { forwardRef: true })(ContactList);

使用组件时，ref将直接指向ContactList实例：

<Provider store={GridStore}>
  <ContactList
    ref={component => {
      window.reactContactListContainer = component
    }}
  />
</Provider>

此时调用window.reactContactListContainer.renderContacts()即可正常访问方法。

方案2：react-redux v5及以下 用withRef配置 #

如果你的react-redux版本较低（v5及更早），使用withRef: true配置，再通过getWrappedInstance()获取原始实例：

// 修改导出
export default connect(mapStateToProps, null, null, { withRef: true })(ContactList);

使用时：

<Provider store={GridStore}>
  <ContactList
    ref={component => {
      // 通过getWrappedInstance获取原始组件实例
      window.reactContactListContainer = component.getWrappedInstance();
    }}
  />
</Provider>

之后调用window.reactContactListContainer.renderContacts()即可。

直接通过ref调用组件方法违背了React的单向数据流原则，更优的做法是：

• 将renderContacts的逻辑抽离到独立的工具函数或store中，让需要使用的地方直接调用工具函数或通过store获取结果
• 通过props传递回调，让父组件触发子组件的逻辑，而非直接调用子组件方法

内容的提问来源于stack exchange，提问作者rns