javascript - React Native：孩子对父母道具的变化没有反应

Question

我有一个自定义模态组件，我在其中传递了一个 isVisible 道具，这个道具来自它的父状态属性状态，现在在模态（子组件）中，我可以在父级中编辑和事件并对其做出反应，更改父级中的值应该影响孩子并且模态现在应该关闭，但模态没有关闭！

家长：

const [ modalIsVisible, setModalIsVisible ] = useState(false);

const handleCloseModal = ()=>
    {
        setModalIsVisible(false); Alert.alert('caca');
    };

<ReviewFormModal1 onCloseModal={ ()=>{ handleCloseModal() } } isVisible={modalIsVisible}></ReviewFormModal1>

孩子：

const onClosePress = () => 
    {
        props.onCloseModal();
    }

<Modal isVisible={props.isVisible} style={styles.modal}>
                <TouchableOpacity onPress={ ()=>{ onClosePress() } } style={{ flex:1 }}></TouchableOpacity>
</Modal>

我仍然是一个 react-native 新手（来自 imo 更容易的 vue），但是 afaik 这是对父级中的道具变化做出反应的正确方法，道具总是自上而下的。

标签： javascriptreactjsreact-native

Answer 1

删除 handleCloseModal 大括号或添加 return 语句：

<ReviewFormModal1 onCloseModal={ () => handleCloseModal()  } isVisible={modalIsVisible}></ReviewFormModal1>

或者

<ReviewFormModal1 onCloseModal={ ()=>{return handleCloseModal() } } isVisible={modalIsVisible}></ReviewFormModal1>

此外，您可以像这样为您的函数传递一个简单的指针：

<ReviewFormModal1 onCloseModal={handleCloseModal} isVisible={modalIsVisible}></ReviewFormModal1>