React.forwardRef和connect的联合使用

作者: krystal_H | 来源:发表于2022-07-08 17:45 被阅读0次

先使用 React.forwardRef再使用 connect 包一层会使 ref属性漏掉，导致内部实例无法传到外部；

import React, { useState, useEffect, forwardRef, useImperativeHandle } from 'react'
import { connect, useSelector } from 'react-redux'

const mapStateToProps = state => {
  return {
      pxxInfo: state.getIn(['pxx', 'pxxInfo'])
  }
}

function DemoComponent (props) {
  let { productId, nextStep, productHeadInfo, refInstance } = props

  useImperativeHandle(refInstance, () => （{
    onFinish: subNextConFirm
  }), [requiredList])

  return (
     <div>This is a demo</div>
  )
}
let Conponent = connect(mapStateToProps, null)(DemoComponent)
// 注意：ref要更换名字，防止覆盖
export default forwardRef( (props,ref) => <Component  {...props}  refInstance={ref} />)

这样就可以同时使用两个高阶组件了