美文网首页
React.forwardRef和connect的联合使用

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} />)

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

相关文章

网友评论

      本文标题:React.forwardRef和connect的联合使用

      本文链接:https://www.haomeiwen.com/subject/rswtbrtx.html