Question

我正在尝试制作一个HOC函数，该函数将包装列表项，进行一些条件检查，如果条件通过则返回此JSX元素，如果失败则被另一个组件包装。这是render方法中的部分代码：

const workspaceListItem = (
      <React.Fragment>
        <ListItem button onClick={() => this.handleOpening(workspace)}>
          <Avatar>
            <WorkIcon />
          </Avatar>
          <ListItemText
            inset
            primary={workspace.name}
            secondary={`Created: ${workspace.createdTime.split("T")[0]}`}
          />
          {expandButton}
        </ListItem>
        <Collapse in={isOpen} timeout="auto" unmountOnExit>
          {groupList}
        </Collapse>
      </React.Fragment>
    );
    const WithToolTipWorkspace = withToolTip(workspaceListItem);
    return WithToolTipWorkspace;

我将此JSX元素分配给workspaceListItem变量，然后调用HOC withToolTip()并传递workspaceListItem作为参数。这是withToolTip的定义：

import React from "react";
import Tooltip from "@material-ui/core/Tooltip";

function withToolTip(WrappedComponent) {
  return function WrappedWithToolTip(props) {
    return props.parent.children === undefined ||
      props.parent.children.length === 0 ? (
      <Tooltip title="Children of this element does not exist">
        {WrappedComponent}
      </Tooltip>
    ) : (
      { WrappedComponent }
    );
  };
}

export default withToolTip;

编译时出现React错误

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

有人可以向我解释我做错了什么吗？关于React和学习，我是一个初学者。

感谢您提供任何提示，我将不胜感激。

编辑：

我做了estus建议的事情：

return <WithToolTipWorkspace parent={workspace} />;

内部HOC

import React from "react";
import Tooltip from "@material-ui/core/Tooltip";

function withToolTip(WrappedComponent) {
  return function WrappedWithToolTip(props) {
    console.log(props);
    return props.parent.children === undefined ||
      props.parent.children.length === 0 ? (
      <Tooltip title="Children of this element does not exist">
        <WrappedComponent {...props} />
      </Tooltip>
    ) : (
      <WrappedComponent {...props} />
    );
  };
}

export default withToolTip;

现在错误更改为此：

Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: <Fragment />. Did you accidentally export a JSX literal instead of a component?

最可能的原因是我将JSX元素传递给HOC而不是组件，但是如何将其传递给HOC。

Answer 1

错误说明了问题：

如果您从渲染返回Component而不是<Component />，则可能会发生这种情况

应从WrappedComponent创建一个元素。 HOC可能还需要向其传递道具：

return props.parent.children === undefined ||
  props.parent.children.length === 0 ? (
  <Tooltip title="Children of this element does not exist">
    <WrappedComponent {...props}>
  </Tooltip>
) : (
    <WrappedComponent {...props}>    
);

JSX元素的HOC

1 个答案: