Question

我指的是创建React高阶组件taken from this article的示例。

我正在努力充分理解和利用此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带有其道具（称为P）它返回一个新的React组件，其中需要道具P和PopupOnHoverPropType中的道具。

如何使用此HOC？下面的尝试给出了一个打字稿错误，导致传入了太多参数：

  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

好像您只是忘记了对象括号。 React组件都带有一个props对象参数。

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

在高阶组件（HOC）内传递带有道具的组件

1 个答案: