const [liked, setLiked] = useState(false);
  // 写点击评论
  const { isOpen, onOpen, onClose } = useDisclosure();
  const btnRef = React.useRef();

  return (
    <div className="videoSidebar">
      <div className="videoSidebar__button">
        {liked ? (
          <FcLike fontSize={30} onClick={(e) => setLiked(false)} />
        ) : (
          <AiFillHeart fontSize={30} onClick={(e) => setLiked(true)} />
        )}
        <p>{liked ? likesNum + 1 : likesNum}</p >
      </div>
      <div className="videoSidebar__button" ref={btnRef} onClick={onOpen}>
        <FaCommentDots fontSize={30}  />
        <p>{commentNum}</p >
      </div>
      <div className="videoSidebar__button">
        <FaShare fontSize={30} />
        <p>{shareNum}</p >
      </div>
      {/* 点击评论的组件 */}
      <Drawer
        isOpen={isOpen}
        placement="right"
        onClose={onClose}
        finalFocusRef={btnRef}
      >
        <DrawerOverlay />
        <DrawerContent>
          <DrawerCloseButton />
          <DrawerHeader>这里是评论展示的内容</DrawerHeader>

          <DrawerBody>
            <Input placeholder="评论。。。。。。" />
          </DrawerBody>

          <DrawerFooter>
            <Button variant="outline" mr={3} onClick={onClose}>
              Cancel
            </Button>
          </DrawerFooter>
        </DrawerContent>
      </Drawer>
    </div>
  );