Javascript 在高阶组件（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>
  )
};

模态反应组件具有以下支柱结构：

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

const model:React.FC={…}

看起来您刚刚忘记了对象括号。React组件都采用单个props对象参数

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

---

哪一个给出了错误<代码>使用PopupOnHover？或者增强型，不管是什么？谢谢，就这样。如果我能问一下，你能回顾一下对代码的解释吗&这是否正确？Thanks@Kayote当然可以，但是你想复习什么“代码解释”呢？在上面的问题中，就在第一段代码下面，我从这里开始：

以下是我对上述代码的理解：

谢谢。@Kayote是的，这基本上就是我的想法。你链接的那篇文章很好地描述了HOC的类型。

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