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

【问题标题】：HOC for JSX element - rendering jsx with wrapped elementJSX 元素的 HOC - 使用包装元素渲染 jsx
【发布时间】：2021-02-06 06:30:59
【问题描述】：

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

如何解决？

【问题讨论】：

标签： javascript reactjs jsx

【解决方案1】：

当你传入 JSX 时，你的 HOC 接受 Component 参数。尝试使用函数包装 JSX 或传入呈现 Button 的组件。

但是，在您的情况下，您可能希望控制组件中的工具提示文本。如果是这种情况，我不会为此使用 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>
);

【讨论】：