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

Question

I want to call a ReactJS HOC to wrap a tooltip around JSX.

The call should be able like this:

 withTooltip(JSX, "very nice")

Therefor I have created this function:

 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;

The call:

 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> );

It says:

Functions are not valid as a React child. This may happen if you return a Component instead of from render. Or maybe you meant to call this function rather than return it

How to solve it ?

Answer 1

Your HOC accepts a Component argument while you are passing in JSX. Try wrapping the JSX with a function or pass in a component which renders the Button.

However, in your case, you probably want to have control over the toolTip text in your component. If this is the case, I would not use a HOC for this, but rather a wrapping Component.

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>
);