如何在 React Native 中将状态从自定义组件传递给父组件

Question

我正在尝试创建一个自定义模态组件以在我的整个应用程序中重复使用，但我很难管理状态。使用此模式的一个示例是有一个使其可见的按钮。对我来说，这似乎表明模态的状态需要存储在父组件中，否则，无法访问最初为假的可见性以使其变为真。但是，我不确定如何从子模态访问父组件中的状态。也许这完全是错误的。似乎在自定义组件中存储状态会更干净。

我的许多尝试都是按照下面的思路进行的。请理解我在这里省略了大量我认为不相关的代码。我不是在寻找代码故障排除，我正在努力解决整个概念。

    import React, { useState } from 'react';
    import { << various components >>, Modal } from 'react-native';
    import CustomModal from << path >>;
    
    export default function App() {
      const [modalVisible, setModalVisible] = useState(false);

      return (
        << screen components >>
        <CustomModal
          visible={modalVisible}
          << etc. >>
        />

        <TouchableOpacity onPress={setModalVisible(true)}>
          <Text>Open Modal</Text>
        </TouchableOpacity>
      );
    }

    << styles, etc. >>

所以这成功地使模态可见，但我不确定如何关闭它。模式上有一个按钮用于关闭它，但我不知道 onPress 应该做什么。我想访问父级中的 modalVisible 状态以调用 setModalVisible(false)，但我不知道该怎么做。

我是不是想错了？我见过几个使用 'this' 和 'constructor' 和 'super' 等的例子。我认为这些东西被钩子取代了，它们只是让我感到困惑（请对我放轻松）。我也确信你可以用 Redux 做到这一点，但我正在努力更好地理解“提升状态”，如果我说得对的话。

Answer 1

在您的 CustomModal 组件中作为 setModalVisible 的道具传递，例如：

    <CustomModal
      visible = {modalVisible}
      setModal = {setModalVisible(!modalVisible)}
      << etc. >>
    />

然后在您的模态调用结束时 setModal。

希望这对你有用。

如何在 React Native 中将状态从自定义组件传递给父组件

How to pass state from custom component to parent in React Native

components

react-native

use-state