陣營本地操縱部件

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) 
    }