JSX 元素的 HOC - 使用包裝元素渲染 jsx

Question

我想調用一個 ReactJS HOC 來圍繞 JSX 包裝一個工具提示。

調用應該是這樣的：

 withTooltip(JSX, "very nice")

因此我創建了這個函數：

 import React from "react"; import MUITooltip from "@material-ui/core/Tooltip"; import useStyles from "./index.styles"; const withTooltip = (Component, text: string) => (props) => { const classes = useStyles(); return ( <MUITooltip className={classes.root} title={text}> <Component {...props} /> </MUITooltip> ); }; export default withTooltip;

電話：

 import withTooltip from "commons/withTooltip/withTooltip"; const dialogBtn = isOk && withTooltip( <div className={classes.buttonWithLoader}> <OpenDialogButton variant={BaseButtonVariant.Icon} openDialogAttributes={areas.button.openDialogAttributes} /> </div>, "Very nice", ); return ( <Fragment> {dialogBtn} </Fragment> );

它說：

函數作為 React 子元素無效。 如果您返回 Component 而不是從 render 返回，則可能會發生這種情況。 或者也許你打算調用這個函數而不是返回它

如何解決？

Answer 1

當您傳入 JSX 時，您的 HOC 接受一個Component參數。 嘗試使用函數包裝 JSX 或傳入呈現按鈕的組件。

但是，在您的情況下，您可能希望控制組件中的工具提示文本。 如果是這種情況，我不會為此使用 HOC，而是使用包裝組件。

function WithTooltip({ classes, text, children }) {
  return (
    <MUITooltip className={classes.root} title={text}>
      {children}
    </MUITooltip>
  );
}

export default WithTooltip;

const dialogBtn = isOk && (
  <WithTooltip text="Very nice">
    <div className={classes.buttonWithLoader}>
      <OpenDialogButton
        variant={BaseButtonVariant.Icon}
        openDialogAttributes={areas.button.openDialogAttributes}
      />
    </div>
  </WithTooltip>
);