ChakraUI 自定义菜单按钮的问题

Question

我使用 ChakraUI 为我的网站创建菜单。我想将我的自定义图像组件设置为 MenuButton，这是 ChakraUI 的菜单组件正常工作所必需的。我尝试了在网上找到的两种方法，这些是我遇到的问题：

方法 1： forwardRefs

正如网站所说，我编写了代码，以便我的自定义组件可以接受 MenuButton 传递的引用。遗憾的是按钮不起作用。

const Menu = () => {
  const { user, signOut } = useAuth();

  return (
    <motion.div
      initial={{
        opacity: 0,
      }}
      animate={{ opacity: 1 }}
      transition={{ duration: 0.4, delay: 0.2 }}
    >
      <Menu>
        <MenuButton as={CustomButton}></MenuButton>
        <MenuList>
          <MenuItem>Test</MenuItem>
        </MenuList>
      </Menu>
    </motion.div>
  );
};

import { forwardRef } from "@chakra-ui/react";

const CustomButton= forwardRef((props, ref) => {
  const { user, signOut } = useAuth();

  return (
    <motion.img
      ref={ref}
      whileHover={{ scale: 1.1, rotate: "-360deg" }}
      whileTap={{
        scale: 0.95,
        borderRadius: "10rem",
      }}
      src={
        "https://source.boringavatars.com/beam/240/" + user.email + "?square"
      }
      height="50px"
      width="50px"
    />
  );
});

方法 2： Chakra Framer Motion

作为网站说。该按钮现在可以正常工作，但是一旦我单击该按钮，动画就会无限期地停止工作。

import { motion } from 'framer-motion'

const ProfileButton = () => {
  const { user, signOut } = useAuth();
  const MotionMenuButton= motion(MenuButton)

  return (
    <motion.div
      initial={{
        opacity: 0,
      }}
      animate={{ opacity: 1 }}
      transition={{ duration: 0.4, delay: 0.2 }}
    >
      <Menu>
        <MotionMenuButton
           whileHover={{ scale: 1.1, rotate: "-360deg" }}
           whileTap={{
             scale: 0.95
      }}>
           <Image
             src={"https://source.boringavatars.com/beam/240/" + user.email + "?square"}/>
        </MotionMenuButton>
        <MenuList>
          <MenuItem>Bonk</MenuItem>
        </MenuList>
      </Menu>
    </motion.div>
  );
};

我哪里错了？

Answer 1

我知道这是一个老问题，但可能会帮助遇到同样问题的人。

在方法 1 中，确保也传播 props 对象：

import { forwardRef } from "@chakra-ui/react";

const CustomButton= forwardRef((props, ref) => {
  const { user, signOut } = useAuth();

  return (
    <motion.img
      ref={ref}
      whileHover={{ scale: 1.1, rotate: "-360deg" }}
      whileTap={{
        scale: 0.95,
        borderRadius: "10rem",
      }}
      src={
        "https://source.boringavatars.com/beam/240/" + user.email + "?square"
      }
      height="50px"
      width="50px"
      props={...props}
    />
  );
});