文章/答案/技术大牛

发布

社区首页 >问答首页 >ChakraUI自定义菜单按钮的问题

问ChakraUI自定义菜单按钮的问题
EN

Stack Overflow用户

提问于 2022-03-04 11:51:39

回答 1查看 870关注 0票数 0

我使用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: 脉轮帧运动

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

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

我哪里出问题了？

reactjs

chakra-ui

回答 1

Stack Overflow用户

发布于 2022-07-13 12:43:52

我知道这是个老问题，但可能对有同样问题的人有帮助。

在方法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}
    />
  );
});

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/71351011

复制

相似问题

问ChakraUI自定义菜单按钮的问题
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问ChakraUI自定义菜单按钮的问题EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问ChakraUI自定义菜单按钮的问题
EN