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

Question

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

我收到以下错误：

Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use 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>
  );
}

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

我在 IconButton

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

Codesandbox 演示

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

ForwardRef error in Chakra-ui when wrapping IconButton component

reactjs

chakra-ui