Comment fermer un modal imbriqué dans un autre composant personnalisé ? Mon modal est dans un autre composant. J'ai un problème pour transmettre l'état au composant parent. Vous pouvez voir les composants parent et enfant ci-dessous.
Composant Parent :
const ViewNote = ({route, navigation}) => { const [visible, setVisible] = useState(false); function visibility(cases) { setVisible(cases); console.log(cases); } return ( {/* 模态框 */} setVisible(true)}> ) } export default ViewNote
Sous-composant :
const FancyAlert = ({visible}) => { const [showAlert, setShowAlert] = useState(false); return ( 您确定要删除此便签吗？ setVisible(false)}> 取消 ) } export default FancyAlert
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Déplacez l'état vers le composant parent et transmettez la fonction 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 FancyAlertIl vous suffit de passer la fonction "visibilité" comme propriété de FancyAlert. Votre code devrait ressembler à ceci :
const ViewNote = ({route, navigation}) => { const [visible, setVisible] = useState(false); function visibility(cases) { setVisible(cases); console.log(cases); } return ( {/* MODAL */} visibility(true)}> ) } export default ViewNoteEnsuite, le composant FancyAlert devrait être :
const FancyAlert = ({ visible, visibility }) => { const [showAlert, setShowAlert] = useState(false); return ( 你确定要删除这个笔记吗？ visibility(false)}> 取消 ) } export default FancyAlertC'est ça