react class에서 Hook을 사용하고싶다면

sangwoo noh·2022년 5월 19일
0

ReactJS

목록 보기
10/16

HOC로 해결하면된다.

예를들면

import { ComponentType } from 'react'
import { useIntl } from 'react-intl'
import { useParams, useLocation, useNavigate } from 'react-router-dom'

interface WrappedProps {
  // 전달받는 컴포넌트의 props
}
const withSetTimeout = <P extends WrappedProps>(
  WrappedComponent: ComponentType<P>,
) => {
  const Component = (props: P) => {
    console.log('HOC props: ', props)
    const params = useParams()
    const location = useLocation()
    const navigate = useNavigate()
    const intl = useIntl()
    const combineProps = {
      ...props,
      params,
      location,
      navigate,
      intl,
    }
    return <WrappedComponent {...combineProps} />
  }
  return Component
}

export default withSetTimeout
profile
하기로 했으면 하자

0개의 댓글