每当我单击此配置文件组件时;弹出窗口将被触发。但是，我将<PopoverTrigger>...code</Popovertrigger>的子项 Package 到这个<PopoverTrigger><ProfileComponent/></Popovertrigger>中。因此，弹出窗口不起作用，我只是 Package 子项，因为我希望ProfileComponent是可重用的
这是我的全部代码

配置文件组件

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

然后是我的配置文件弹出窗口组件

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的触发器