JSX元素的HOC-用包装元素渲染jsx

Question

我想调用ReactJS HOC来包装JSX周围的工具提示。

呼叫应能如下所示：

withTooltip(JSX, "very nice")

因此，我创建了此函数：

js lang-js prettyprint-override">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子函数无效。如果返回组件而不是从渲染返回组件，可能会发生这种情况。或者你想调用这个函数而不是返回它

如何解决？

Answer 1

当您传入JSX时，HOC接受一个组件参数。尝试用函数包装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>
);