如何关闭嵌套在自定义子组件中的Modal弹窗？

核心问题 #

1. 子组件FancyAlert里尝试调用setVisible(false)，但setVisible是父组件的状态更新函数，子组件未接收该参数，无法修改父组件的visible状态，导致弹窗无法关闭。
2. 子组件内部定义的showAlert状态未被使用，属于冗余代码。

修复步骤 #

1. 父组件修改：传递状态更新函数给子组件 #

父组件需要把setVisible以props形式传给子组件，让子组件能触发父组件的状态更新：

const ViewNote = ({route, navigation}) => {
  const [visible, setVisible] = useState(false);

  return (
    <View style={styles.noteContainer}>
        {/* 新增onClose属性，传递状态更新函数 */}
        <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 ViewNote

2. 子组件修改：接收并使用onClose函数 #

移除子组件内无用的showAlert状态，直接用父组件传递的visible控制弹窗显示，点击Cancel按钮时调用onClose关闭弹窗：

const FancyAlert = ({visible, onClose}) => {
  return (
    <Modal transparent visible={visible}>
      <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

拓展：添加确认删除逻辑 #

如果需要在弹窗里处理确认删除的逻辑，可以给子组件新增onConfirm属性，先执行删除操作再关闭弹窗：

// 子组件示例
const FancyAlert = ({visible, onClose, onConfirm}) => {
  const handleConfirm = () => {
    // 执行删除操作
    onConfirm();
    // 关闭弹窗
    onClose();
  }

  return (
    <Modal transparent visible={visible}>
      <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>
            <Pressable style={styles.confirm} android_ripple={{color: '#d9d9d9'}} onPress={handleConfirm}>
              <Text style={[styles.text, {fontFamily: 'SofiaProBold', color: 'red'}]}>Delete</Text>
            </Pressable>
          </View>
        </View>
      </View>
    </Modal>
  )
}

对应的父组件传递onConfirm：

<FancyAlert 
  visible={visible} 
  onClose={() => setVisible(false)} 
  onConfirm={() => {
    // 此处编写删除笔记的逻辑
    console.log('执行删除操作')
  }} 
/>

内容的提问来源于stack exchange，提问作者bitterkofte