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

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 更改为 a 而不是使用 Icon 包裹在 Button 中，错误消失。

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

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

1. 我在 IconButton 中使用 as 而不是 icon prop
2. 其次，我传递的是引用而不是组件 我没有这样做 } />，而是这样做 。

Answer 1

根据文档，IconButton 有自己的 prop 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"
      }}
    />
  );
}

Codesandbox演示