Chakra UI 和 React |弹出窗口触发器不起作用

Question

每当我单击此配置文件组件时；弹出窗口将被触发。但是，我将 ...code 的子项包装到此 中因此，弹出窗口不起作用，我只是包装子组件，因为我希望 ProfileComponent 可重用

这是我的整个代码

Profile组件

interface IProfileProps extends BoxProps {
  query: boolean;
}

const Profile = ({ query }: IProfileProps) => {
  return (
    <Box px={query ? "0px" : "5"} w="full" position="absolute" bottom="10">
      {" "}
      <HStack
        p="10px"
        borderRadius="full"
        w="full"
        h="full"
        // spacing="20px"
        cursor="pointer"
        _hover={{ bg: "rgba(255, 233, 206, 0.45)" }}
      >
        <Image
          m={query ? "auto" : "0"}
          boxSize="45px"
          borderRadius="full"
          alt="user profile"
          src="https://i.pinimg.com/originals/32/38/6c/32386c72c7f2a8b5c1a10fc51c149cb1.jpg"
        />
        <VStack
          spacing="5px"
          alignItems="baseline"
          w="full"
          h="full"
          display={{ lg: query ? "none" : "block" }}
        >
          <Text fontWeight="bold">Mosh Ontong</Text>

          <HStack color="green.400">
            <Icon as={MdVerifiedUser}></Icon>
            <Text fontWeight="bold" fontSize="0.8rem">
              Verified
            </Text>
          </HStack>
        </VStack>
        <Icon
          as={HiDotsVertical}
          boxSize="20px"
          display={{ lg: query ? "none" : "block" }}
        />
      </HStack>{" "}
    </Box>
  );
};

然后是我的 Profile Popover 组件

const DesktopProfile = ({ query }: IProfileProps) => {
  const initRef = React.useRef<HTMLButtonElement>(null);
  return (
    <Popover placement="right" initialFocusRef={initRef}>
  {/* //Focus here */}
      <PopoverTrigger>
     {/* //So this is my Profile Component,
 when I click this profile component it failed to trigger the popover */}
        <Profile query={query} />
      </PopoverTrigger>

      <PopoverContent color="white" bg="blue.800" borderColor="blue.800">
        <PopoverHeader pt={4} fontWeight="bold" border="0">
          Mosh Ontong
        </PopoverHeader>
        <PopoverArrow />
        <PopoverCloseButton />
        <PopoverBody>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
          eiusmod tempor incididunt ut labore et dolore.
        </PopoverBody>
        <PopoverFooter
          border="0"
          d="flex"
          alignItems="center"
          justifyContent="space-between"
          pb={4}
        >
          <Box fontSize="sm">Step 2 of 4</Box>
          <ButtonGroup size="sm">
            <Button colorScheme="green">Setup Email</Button>
            <Button colorScheme="blue" ref={initRef}>
              Next
            </Button>
          </ButtonGroup>
        </PopoverFooter>
      </PopoverContent>
    </Popover>
  );
};

我的目标是 popovertrigger 标签接受我的 ProfileComponent 作为 Popover 的触发器

Answer 1

我解决了我刚刚包装我的 ProfileComponent 的问题

 <PopoverTrigger>
        {/* I wrapped my Profile Component*/}
        <Box px={query ? "0px" : "5"} w="full" position="absolute" bottom="10">
          <Profile query={query}></Profile>
        </Box>
      </PopoverTrigger>

Answer 2

用 Box 组件包装你的组件，或者用 chakra ui 的forwardRef 包装你的 Profile 组件，这样他就可以使用你组件的 Ref