Question

所以这是在我的主类中，我试图从子组件中渲染模态。

        <NewModal  
            transparent={true}
            show={props.show}
            >
        </NewModal>

show最初在父构造函数中设置为false，在按下我的flatList中的一个元素后，我将 show设置为true 但是我不确定为什么它不能很好地工作，这是我的孩子班，我已经尝试了很多带有道具的变体，而且似乎没有任何作用，我能得到的最好的是在我什至没有按一下之前的模态展示平面列表中我的元素。

子组件：

 const NewModal = (props) => {
   return (
      <Modal transparent={true} visible={props.show}  >
        <View style={styles.modalView}>
          <View>
           <Text>Modal Text</Text>
          </View>
         <Button title="Back" onPress={() => visible=false } />
       </View>
    </Modal>
  );

};

 const styles = StyleSheet.create({
 modalView: {
  marginTop: 100,
  height: "70%",
  width: "95%",
  alignSelf: "center",
  borderRadius: 5,
  borderWidth: 0.1,
  shadowOpacity: 0.7,
  backgroundColor: "white",
 },
 });

  export default NewModal;

Answer 1

如果您显示状态是在父组件中管理的，则还必须在父组件中管理状态的更新。要在用户单击“后退按钮”组件时更改其值，您已在父组件中编写了一个函数，并将该函数作为道具传递给子组件。然后孩子将调用该函数以更新状态。

父母：

  <NewModal  
     transparent={true}
     show={state.show}
     toggleShow={ () => this.setState({ show:false }) }
   >
     ....
   </NewModal>

孩子：

<Button title="Back" onPress={() => this.props.toggleShow() } />

为什么props无法与我的子组件React JS（react native）一起使用

1 个答案: