包装ForwardRef组件时Chakra-ui中的IconButton错误

Question

我创建了一个可重用的组件，它封装了IconButton，并将其作为来自react-icons的道具图标之一传递。

我得到以下错误：

警告:不能给函数组件参考。访问此引用的尝试将失败。你是说要使用React.forwardRef()吗？

以下是我的组件包装：

export function SidebarMenu({ icon, isActive, handleMenuClick, name }) {
  return (
    <IconButton
      className={isActive ? 'active' : ''}
      aria-label={name + ' menu'}
      isActive={isActive}
      bg="transparent"
      px="0"
      as={icon}
      _hover={{
        cursor: 'pointer',
        backgroundColor: 'transparent',
      }}
      _active={{
        backgroundColor: 'transparent',
      }}
      onClick={() => handleMenuClick(name)}
    />

下面是我如何使用包装器组件

   <SidebarMenu
    icon={VscCode}
    name="folders"
    handleMenuClick={handleMenuClick}
    isActive={menuList.folders}
   />

但是，如果我将内容IconButton改为使用包装在Button中的Icon，错误就会消失。

export function SidebarMenu({ icon, isActive, handleMenuClick, name }) {
  return (
    <Button
      className={isActive ? 'active' : ''}
      aria-label={name + ' menu'}
      isActive={isActive}
      bg="transparent"
      px="0"
      // as={icon}
      _hover={{
        cursor: 'pointer',
        backgroundColor: 'transparent',
      }}
      _active={{
        backgroundColor: 'transparent',
      }}
      onClick={() => handleMenuClick(name)}
    >
      <Icon as={icon} w={7} h={7} />
    </Button>
  );
}

编辑：适用于任何可能遇到同样问题的人。这里有几件事我做错了。

在IconButton

• Second，中，

1. I使用的是as而不是icon螺旋桨--我是在传递一个引用而不是组件，而不是执行<IconButton icon={<VsColorMode />} />，我是在执行这个<IconButton icon={VsCodeMode} />.

Answer 1

根据文档，IconButton有自己的支柱icon，因此，在本例中，不要使用as，而是使用icon和Icon

function SidebarMenu({ icon }) {
  return (
    <IconButton
      bg="transparent"
      px="0"
      icon={<Icon as={icon} w={7} h={7} />}
      // ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
      _hover={{
        cursor: "pointer",
        backgroundColor: "transparent"
      }}
      _active={{
        backgroundColor: "transparent"
      }}
    />
  );
}

码箱演示

​

​