基于Chakra UI：点击轮播图按钮仅展示对应标题至模态框

当前问题：点击轮播图中任意「Open Modal」按钮，模态框无法仅显示当前轮播项的标题，而是出现所有轮播标题混杂的情况。

修改方案： #

1. 调整模态框组件（CarouselModal）

让组件支持接收外部传入的标题，并在模态框内渲染该标题：

import { useDisclosure, Button, Modal, ModalOverlay, ModalContent, ModalHeader, ModalCloseButton, ModalBody, ModalFooter } from "@chakra-ui/react";

// 明确props类型，替代any
interface CarouselModalProps {
  title: string;
}

const CarouselModal = ({ title }: CarouselModalProps) => {
  const { isOpen, onOpen, onClose } = useDisclosure();

  return (
    <div>
      <Button onClick={onOpen}>Open Modal</Button>
      <Modal isOpen={isOpen} onClose={onClose}>
        <ModalOverlay />
        <ModalContent>
          <ModalHeader>{title}</ModalHeader>
          <ModalCloseButton />
          <ModalBody>{title}</ModalBody>
          <ModalFooter>
            <Button colorScheme="blue" mr={3} onClick={onClose}>
              Close
            </Button>
          </ModalFooter>
        </ModalContent>
      </Modal>
    </div>
  );
};

export default CarouselModal;

2. 修改轮播图组件调用逻辑

在遍历轮播项时，将当前项的card.title传递给CarouselModal：

{cards.map((card, index) => (
  <Box
    key={index}
    height="6xl"
    position="relative"
    backgroundPosition="center"
    backgroundRepeat="no-repeat"
    backgroundSize="cover"
    backgroundImage={`url(${card.image})`}
  >
    <Container size="container.lg" height="600px" position="relative">
      <Stack
        spacing={6}
        w="full"
        maxW="lg"
        position="absolute"
        top="50%"
        transform="translate(0, -50%)"
      >
        <Heading
          fontSize={{ base: "3xl", md: "4xl", lg: "5xl" }}
          color="white"
        >
          <Contain>{card.title}</Contain>
        </Heading>
        <Contain>
          <Text
            fontSize={{ base: "3xl", lg: "lg" }}
            color="white"
            fontWeight="bolder"
          >
            {card.text}
            <br />
            {card.TechnologyStackText}
            <br />
          </Text>
          <ModalContain>
            {/* 传递当前轮播项的标题给模态框 */}
            <CarouselModal title={card.title} />
          </ModalContain>
        </Contain>
      </Stack>
    </Container>
  </Box>
))}

说明： #

• 每个轮播项对应独立的模态框实例，各自管理自身的显示/隐藏状态
• 通过props将当前轮播项的标题传递给模态框，确保点击不同按钮时，模态框只展示对应项的内容

内容的提问来源于stack exchange，提问作者한대현