Reactjs 在单个组件中使用多个模型的Chakra UI

我正在使用chakra ui，我想在一个组件中使用两个模态

const { isOpen , onOpen, onClose } = useDisclosure()

 <Button colorScheme="teal" size="xs" mr='2' onClick={onOpen} >
                        Edit
                    </Button>
                    {/* Edit modal */}
                    <Modal isOpen={isOpen} onClose={onClose}>
                            <ModalOverlay />
                            <ModalContent>
                            <ModalHeader>Edit Modal</ModalHeader>
                            <ModalCloseButton />
                            <ModalBody>
                               Edit Modal
                            </ModalBody>

                            <ModalFooter>
                            <Button variant="ghost" mr={3} onClick={onClose}>Cancel</Button>
                                <Button colorScheme="red" onClick={()=>{deleteAddress(address.id)}}>
                                    Delete
                                </Button>
                                
                            </ModalFooter>
                            </ModalContent>
                        </Modal>


                    {/* Delete Address */}

                    <Button colorScheme="red" size="xs"  onClick={onOpen}>
                        Delete
                    </Button> 
                    <Modal isOpen={isOpen} onClose={onClose}>
                            <ModalOverlay />
                            <ModalContent>
                            <ModalHeader>Delete Shipping Address</ModalHeader>
                            <ModalCloseButton />
                            <ModalBody>
                                Are you sure you want to delete the shipping address?
                            </ModalBody>

                            <ModalFooter>
                            <Button variant="ghost" mr={3} onClick={onClose}>Cancel</Button>
                                <Button colorScheme="red" onClick={()=>{deleteAddress(address.id)}}>
                                    Delete
                                </Button>
                                
                            </ModalFooter>
                            </ModalContent>
                        </Modal>

const{isOpen，onOpen，onClose}=useDisclosure（）
编辑
{/*编辑模式*/}
编辑模态
编辑模态
取消
{deleteAddress（address.id）}>
删除
{/*删除地址*/}
删除
删除发货地址
您确定要删除发货地址吗？
取消
{deleteAddress（address.id）}>
删除

isOpen、onOpen、onClose不能作为变量更改，因为它们是内置脉轮函数。

---

有人能给我推荐一种方法来改变其中两种模式（脉轮UI）操作吗？

您可以创建一个自定义模式组件，使用

useDisclosure

。然后，您可以拥有此自定义模态组件的多个实例，而不必共享相同状态的模态：

const CustomModal = ({ showModalButtonText, modalHeader, modalBody }) => {
  const { isOpen, onOpen, onClose } = useDisclosure();
  return (
    <>
      <Button colorScheme="red" size="xs" onClick={onOpen}>
        {showModalButtonText}
      </Button>
      <Modal isOpen={isOpen} onClose={onClose}>
        <ModalOverlay />
        <ModalContent>
          <ModalHeader>{modalHeader}</ModalHeader>
          <ModalCloseButton />
          <ModalBody>{modalBody}</ModalBody>

          <ModalFooter>
            <Button variant="ghost" mr={3} onClick={onClose}>
              Cancel
            </Button>
            <Button
              colorScheme="red"
              onClick={() => {
                alert(1);
              }}
            >
              Delete
            </Button>
          </ModalFooter>
        </ModalContent>
      </Modal>
    </>
  );
};

export default function App() {
  return (
    <div className="App">
      <CustomModal
        showModalButtonText="Edit"
        modalHeader="Edit Modal"
        modalBody="Edit Modal"
      />
      <CustomModal
        showModalButtonText="Delete"
        modalHeader="Delete Shipping Address"
        modalBody="Are you sure you want to delete the shipping address?"
      />
    </div>
  );
}

const CustomModal=（{showModalButtonText，modalHeader，modalBody}）=>{
const{isOpen，onOpen，onClose}=useDisclosure（）；
返回(
{showmodalbuttonext}
{modalHeader}
{modalBody}
取消
{
警报（1）；
}}
>
删除
);
};
导出默认函数App（）{
返回(
);
}

这样，

CustomModal

的每个实例都会跟踪自己的

isOpen

、

onOpen

和

onClose

状态

因为在你的问题中，唯一的动态部分是打开按钮、模态、标题文本和模态正文文本，所以我制作了一些道具，以便为每个实例分别设置这些道具。如果更多的部件需要动态，您可以根据需要添加道具

---

我将一些小东西改成了模态，以便于测试。

这两种模态的唯一区别是头部和身体吗？