Lí do sử dụng

    Trước khi đến với khái niệm về HOC chúng ta hay tìm hiểu xem lí do tại sao cần phải dùng đến nó

    Ví dụ có một component để hiển thị ảnh và khi hover sẽ giảm opacity của ảnh. Đơn giản như sau:

import { useState } from 'react'

const Image = ({ src, opacity }) => {
  const [isHovered, setIsHovered] = useState()
  return (
    <div
      style={{
        opacity: isHovered ? opacity : 1
      }}
      onMouseEnter={() => setIsHovered(true)}
      onMouseLeave={() => setIsHovered(false)}
    >
      <img src={src} alt="img" />
    </div>
  )
}

export default function Image() {
  return (
    <Image src="image" opacity={0.5} />
  )
}

    Nhưng nếu chúng ta có một component khác và cũng muốn hover giống như component Image thì sao?

    Nếu copy lại component Image, chúng ta bị lặp code rất nhiều. Vậy nên chúng ta sẽ sử dụng một số cách để có thể khắc phục điều này.

Wrapper Component

    Wrapper components là các thành phần bao quanh các components và cung cấp cấu trúc mặc định để hiển thị children components

    Chúng ta sẽ tách ra như sau

    Component Image sẽ chỉ nhận đầu vào là src và hiển thị ra ảnh

// Image.jsx
const Image = ({ src }) => {
  return <img src={src} alt="img" />
}

    Component HoverOpacity sẽ nhận children và opacity

// HoverOpacity.jsx
import { useState } from 'react'

const HoverOpacity = ({ children, opacity }) => {
  const [isHovered, setIsHovered] = useState()
    return (
      <div
        style={{
          opacity: isHovered ? opacity : 1
        }}
        onMouseEnter={() => setIsHovered(true)}
        onMouseLeave={() => setIsHovered(false)}
      >
        { children }
      </div>
  )
}

    Và sử dụng như sau

export default function WrappedComponent() {
  return (
    <div>
      <HoverOpacity opacity={0.5}>
        <Image src="image1" />
      </HoverOpacity>
      <HoverOpacity opacity={0.7}>
        <BackgroundImage src="image2" />
      </HoverOpacity>
    </div>
  )
}

Higher Order Functional Component

    Higher order component là một component sẽ nhận đầu vào là một component và trả về một component khác

    Vẫn sẽ tách ra một component Image với chức năng hiển thị ảnh khi nhận src và alt

// Image.jsx
const Image = ({ src, alt = "img" }) => {
  return <img src={src} alt={alt} />
}

    Và component HoverOpacity, nó sẽ nhận giá trị là 1 Component và nó sẽ tạo ra 1 component mới sẽ nhận các props

// HoverOpacity
import { useState } from 'react'

const HoverOpacity = Component => function NewComponent(props) {
  const [isHovered, setIsHovered] = useState()
  const { opacity, alt, ...rest } = props
  const formatAlt = alt?.toLowerCase()?.replaceAll(' ', '-')
  return (
    <div
      style={{
        opacity: isHovered ? opacity : 1
      }}
      onMouseEnter={() => setIsHovered(true)}
      onMouseLeave={() => setIsHovered(false)}
    >
      {alt && <h1>{alt}</h1>}
      <Component {...rest} alt={formatAlt} />
    </div>
  )
}

    NewComponent sẽ bao gồm Component nhận vào ở đây ví dụ là component Image

    Component Image nhận 2 props là src và alt, chúng ta có thể sử dụng các props của NewComponent truyền xuống Component, hoặc thay đổi giá trị của nó

    Cuối cùng chúng ta có thể sử dụng nó như thế này

const HoverImage = HoverOpacity(Image)
// Có thể tạo một component BackgroundImage với trường hợp dùng background image và truyền vào HoverOpacity để sử dụng
const HoverBackgroundImage = HoverOpacity(BackgroundImage)

export default function WrappedComponent() {
  return (
    <div>
      <HoverImage src="img1" opacity={0.8} alt="Image 1" />
      <HoverBackgroundImage src="img2" opacity={0.5} />
    </div>
  )
}

    Cuối cùng chúng ta sẽ có thẻ h1 "Image 1" và thuộc tính alt "image-1"

<img src="img1" alt="image-1">

Kết luận

    Hi vọng sau bài viết này chúng ta đã hiểu được 2 phương pháp trên và nên dùng phương pháp nào cho mỗi trường hợp