如何关闭嵌套在另一个自定义组件中的模态框？ 我的模态框在另一个组件中。我遇到了将状态传递给父组件的问题。您可以在下面看到父组件和子组件。
父组件：
const ViewNote = ({route, navigation}) => { const [visible, setVisible] = useState(false); function visibility(cases) { setVisible(cases); console.log(cases); } return ( {/* 模态框 */} setVisible(true)}> ) } export default ViewNote
子组件：
const FancyAlert = ({visible}) => { const [showAlert, setShowAlert] = useState(false); return ( 您确定要删除此便签吗？ setVisible(false)}> 取消 ) } export default FancyAlert
将状态移动到父组件，并传递onClose函数。
const ViewNote = ({route, navigation}) => { const [visible, setVisible] = useState(false); function visibility(cases) { setVisible(cases); console.log(cases); } return ( {/* MODAL */} setVisible(false)} /> setVisible(true)}> ) } export default ViewNoteconst FancyAlert = ({visible, onClose}) => { return ( Are you sure you want to delete this note? Cancel ) } export default FancyAlert你只需将“visibility”函数作为FancyAlert的属性传递即可。 你的代码应该像这样：
const ViewNote = ({route, navigation}) => { const [visible, setVisible] = useState(false); function visibility(cases) { setVisible(cases); console.log(cases); } return ( {/* MODAL */} visibility(true)}> ) } export default ViewNote然后，FancyAlert组件应该是：
const FancyAlert = ({ visible, visibility }) => { const [showAlert, setShowAlert] = useState(false); return ( 你确定要删除这个笔记吗？ visibility(false)}> 取消 ) } export default FancyAlert这样就可以了