Wie schließe ich ein in einer anderen benutzerdefinierten Komponente verschachteltes Modal? Mein Modal befindet sich in einer anderen Komponente. Ich habe ein Problem bei der Übergabe des Status an die übergeordnete Komponente. Unten sehen Sie die übergeordneten und untergeordneten Komponenten.
Übergeordnete Komponente:
const ViewNote = ({route, navigation}) => {
const [visible, setVisible] = useState(false);
function visibility(cases) {
setVisible(cases);
console.log(cases);
}
return (
<View style={styles.noteContainer}>
{/* 模态框 */}
<FancyAlert visible={visible} />
<View style={styles.deleteContainer}>
<Pressable android_ripple={{color: '#d9d9d9'}} onPress={() => setVisible(true)}>
<MaterialIcons style={styles.icon} name='delete' size={40}/>
</Pressable>
</View>
</View>
)
}
export default ViewNote
Unterkomponente:
const FancyAlert = ({visible}) => {
const [showAlert, setShowAlert] = useState(false);
return (
<Modal transparent visible={visible}>
<View style={styles.modalContainer}>
<View style={styles.dialogContainer}>
<Text style={[styles.text, {fontSize: 16}]}>您确定要删除此便签吗？</Text>
<View style={styles.buttonContainer}>
<Pressable style={styles.cancel} android_ripple={{color: '#d9d9d9'}} onPress={() => setVisible(false)}>
<Text style={[styles.text, {fontFamily: 'SofiaProBold'}]}>取消</Text>
</Pressable>
</View>
</View>
</View>
</Modal>
)
}
export default FancyAlert 
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
将状态移动到父组件，并传递onClose函数。
const ViewNote = ({route, navigation}) => { const [visible, setVisible] = useState(false); function visibility(cases) { setVisible(cases); console.log(cases); } return ( <View style={styles.noteContainer}> {/* MODAL */} <FancyAlert visible={visible} onClose={() => setVisible(false)} /> <View style={styles.deleteContainer}> <Pressable android_ripple={{color: '#d9d9d9'}} onPress={() => setVisible(true)}> <MaterialIcons style={styles.icon} name='delete' size={40}/> </Pressable> </View> </View> ) } export default ViewNoteconst FancyAlert = ({visible, onClose}) => { return ( <Modal transparent visible={visible} onClose={onClose}> <View style={styles.modalContainer}> <View style={styles.dialogContainer}> <Text style={[styles.text, {fontSize: 16}]}>Are you sure you want to delete this note?</Text> <View style={styles.buttonContainer}> <Pressable style={styles.cancel} android_ripple={{color: '#d9d9d9'}} onPress={onClose}> <Text style={[styles.text, {fontFamily: 'SofiaProBold'}]}>Cancel</Text> </Pressable> </View> </View> </View> </Modal> ) } export default FancyAlert你只需将“visibility”函数作为FancyAlert的属性传递即可。 你的代码应该像这样：
const ViewNote = ({route, navigation}) => { const [visible, setVisible] = useState(false); function visibility(cases) { setVisible(cases); console.log(cases); } return ( <View style={styles.noteContainer}> {/* MODAL */} <FancyAlert visible={visible} visibility={visibility} /> <View style={styles.deleteContainer}> <Pressable android_ripple={{color: '#d9d9d9'}} onPress={() => visibility(true)}> <MaterialIcons style={styles.icon} name='delete' size={40}/> </Pressable> </View> </View> ) } export default ViewNote然后，FancyAlert组件应该是：
const FancyAlert = ({ visible, visibility }) => { const [showAlert, setShowAlert] = useState(false); return ( <Modal transparent visible={visible}> <View style={styles.modalContainer}> <View style={styles.dialogContainer}> <Text style={[styles.text, {fontSize: 16}]}>你确定要删除这个笔记吗？</Text> <View style={styles.buttonContainer}> <Pressable style={styles.cancel} android_ripple={{color: '#d9d9d9'}} onPress={() => visibility(false)}> <Text style={[styles.text, {fontFamily: 'SofiaProBold'}]}>取消</Text> </Pressable> </View> </View> </View> </Modal> ) } export default FancyAlert这样就可以了