在高階組件 (HOC) 中傳遞帶有道具的組件

Question

我參考了這個創建 React 高階組件的例子， 取自這篇文章。

我正在努力完全理解和利用這個 HOC。

interface PopupOnHoverPropType {
  hoverDisplay: string;
}

const WithPopupOnHover = <P extends object>(BaseComponent: React.FC<P>): React.FC<P & PopupOnHoverPropType> => ({ hoverDisplay, ...props }: PopupOnHoverPropType) => {

  const [displayMsg, setDisplayMsg] = useState<boolean>(false);
  const toggleDisplayMsg = () => {
    setDisplayMsg(displayMsg);
  };
  return (
    <div onMouseEnter={() => setDisplayMsg(true)}>
      <div className={`${hoverDisplay} popup`} onClick={toggleDisplayMsg}/>
      <BaseComponent {...props as P} />
    </div>
  )
};

以下是我對上述代碼的理解：

我們定義了一個名為WithPopupOnHover的 HOC，它接受一個 React 組件（BaseComponent）。 BaseComponent 帶有它的 props（稱為 P），它返回一個新的 React 組件，該組件接受 props P 和PopupOnHoverPropType中的 props。

我如何使用這個 HOC？ 以下嘗試給出了 typescript 錯誤，即傳入了太多 arguments：

  const enhanced = WithPopupOnHover(Modal);
  const m = Enhanced(a,b,c, "up");

Modal React 組件具有以下 props 結構：

const Modal: React.FC<{
  a: string;
  b(): void;
  c(locationData: customType): void;
}> = { ... }

Answer 1

看起來您剛剛忘記了 object 支架。 React 組件都采用單個 props object 參數。

const Enhanced = WithPopupOnHover(Modal);
const m = Enhanced({ a, b, c });