在高阶组件 (HOC) 中传递带有 props 的组件

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 自带 props（简称 P） returns 一个新的 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) 中传递带有 props 的组件

Pass a Component with props, inside a Higher-Order-Component (HOC)

javascript

reactjs

typescript

higher-order-functions

higher-order-components