阵营本地操纵部件

Question

之间的值我有这样的模态分量：

export default class PopUpModal extends Component { 
    constructor() { 
     super(); 
     //this.state = {windowVisible: false}; 
    } 
    openModal =() => { 
     this.props.onToggle(true); 
    } 
    closeModal =() => { 
     console.log('Pressing CLOSE'); 
     this.props.onToggle(false); 
    } 
    setMessage = (text) => { 
     this.props.modalText = text; 
    } 
    render() { 

     return (

     <Modal style={styles.modal} position={"center"} swipeToClose={false} backdropPressToClose={false} visible={this.props.windowVisible} 
     onRequestClose={() => {this._setModalVisible(false)}} > 
       <View style={styles.modalContentContainer}> 
       <TouchableHighlight onPress={() => { 
        this.closeModal(); 
       }}> 

       <Text>{this.props.modalText}</Text> 
       </TouchableHighlight> 

       </View> 
      </Modal> 
    ); 

    } 
} 

被呈现在一个场景。而且我已经设法通过“setModalVisible”e.i来使这两者之间的行动起作用。但是我想操纵/更改场景中的this.props.modalText的值，因为它会显示可能会有所不同的错误消息。

这是从场景的相关代码：

export default class LoginScene extends Component { 

    constructor(p) { 
    super(p); 

    this.state = { 
     email: '', 
     password: '', 
     windowVisible: false, 
     modalText: '', 
    }; 

    } 
    onTogglePopUpWindow =(value) => { 
    console.log('PRESSING UP'); 
    this.setState({windowVisible: value}); 
    } 

    render() { 

    const { email, password } = this.state; 

    return (
     <View style={styles.container}> 


     {this.state.windowVisible ? <PopUpModal 
      windowVisible={this.state.windowVisible} 
      onToggle={this.onTogglePopUpWindow} 
     /> : null} 

所以这是真的对此事的，因为我什至不知道如何开始指向任何代码。但是我想实现的是让我的PopUpModal组件中的<Text>元素的值根据我写的一些if语句而改变。基本上设置它的值从LogInScene。

在此先感谢。

Answer 1

不知道我是否了解您的需求是否正确。看起来你想要将来自ModalText的LoginScene数据传递给PopUpModal组件。

您可以将它作为道具传递。

<PopUpModal 
    windowVisible={this.state.windowVisible} 
    onToggle={this.onTogglePopUpWindow} 
    modalText={this.state.modalText}  
     /> 

然后在PopUpModal组件中，您将有权访问此模态文本。

export default class PopUpModal extends Component { 
    constructor() { 
     super(); 
     console.log(this.props.modalText) 
    }