Làm thế nào để tạo Props Proxy cho HOC component?

Trong React, Props Proxy là một kỹ thuật trong Higher-Order Components (HOC) mà thông qua đó HOC có thể thay đổi, thêm, hoặc loại bỏ props trước khi chúng được truyền đến Wrapped Component (component được bọc bởi HOC). Đây là một cách để tùy chỉnh hoặc thay đổi hành vi của một component mà không cần sửa đổi mã nguồn của chính component đó.

Cách tạo Props Proxy cho HOC:

Để tạo một Props Proxy cho một HOC, bạn sẽ tạo một function mà nhận vào một component và trả về một component mới. Trong function này, bạn có thể thay đổi props trước khi chúng được truyền đến Wrapped Component.

Dưới đây là một ví dụ về cách tạo một Props Proxy HOC:

import React from 'react';

// Đây là HOC Props Proxy
function withPropsProxy(WrappedComponent) {
  // Trả về một component mới
  return class extends React.Component {
    render() {
      // Tạo một bản sao của props
      const newProps = {
        ...this.props,
        // Thêm, thay đổi hoặc loại bỏ các props tại đây
        extraProp: 'This is an extra prop!'
...