嵌套模态弹出框React或任何其他

Question

需要模态内模态，如果你点击编辑，然后是一个模态正在打开。我需要在打开的模态

里面再添加一个模态

Answer 1

要在React中创建嵌套的模态弹出框，你可以使用模态组件和条件渲染的组合。

例子

import React from 'react';
const ParentModal = () => {
const [showChildModal, setShowChildModal] = React.useState(false);
return (
<>
<button onClick={() => setShowChildModal(true)}>Show Child Modal</button>
{showChildModal && <ChildModal onClose={() => setShowChildModal(false)} />}
</>
);
};
const ChildModal = ({ onClose }) => {
const [showGrandchildModal, setShowGrandchildModal] = React.useState(false);
return (
<>
<button onClick={() => setShowGrandchildModal(true)}>Show Grandchild Modal</button>
{showGrandchildModal && <GrandchildModal onClose={() => setShowGrandchildModal(false)} />}
<button onClick={onClose}>Close</button>
</>
);
};
const GrandchildModal = ({ onClose }) => (
<>
<p>I'm the grandchild modal!</p>
<button onClick={onClose}>Close</button>
</>
);
export default ParentModal;

在上面的例子中，我们有三个模态组件:ParentModal、ChildModal和GrandchildModal。ParentModal组件是嵌套的模态弹出框的根，它包含一个按钮，当点击它时将显示ChildModal。ChildModal组件，反过来，包含一个按钮，当点击时将显示GrandchildModal。每个模态组件也有一个"close"按钮，当点击时将关闭模式。

我们在每个组件中使用useState钩子来跟踪模态的状态(是打开还是关闭)，并且我们使用条件呈现