如何根據狀態改變組件的狀態？

Question

我想創建一個包含按鈕的簡單頁面。當我點擊那個按鈕時，頁面會變成別的東西。

class LoginScreen extends Component { 

    render() { 
     return (
      <Button title='Login' onPress={() => 
       this.setState({ login: true}) 
      }/> 
     ); 
    } 

} 

class LogoutScreen extends Component { 

    render() { 
     return (
      <Button title='Logout' onPress={() => 
       this.setState({ login: false}) 
      }/> 
     ); 
    } 

} 

class Screen extends Component { 
    constructor(props){ 
     super(props); 
     this.state = {login: false} 
    } 
    render(){ 
     return (
      <View> 
      // I want to place LogoutScreen or LoginScreen here based on current state 
      </View> 
     ); 
    } 
} 

如何根據當前狀態在屏幕組件中設置LoginScreen和LogoutScreen？

Answer 1

如果您想要在組件之間移動，您可能需要考慮添加導航。還要更新父組件上的狀態，您需要將onPress移動到屏幕上：

class Screen extends Component { 
    constructor(props){ 
     super(props); 
     this.state = {login: false} 
    } 
    toggleLogin =() => this.setState(prevState => ({ login: !prevState.login }) 

    render(){ 
     return (
      <View> 
       {this.state.login ? <LoginScreen toggleLogin={this.toggleLogin} /> : 
       <LogoutScreen toggleLogin={this.toggleLogin} />} 
      </View> 
     ); 
    } 
} 
class LoginScreen extends Component { 

    render() { 
     return (
      <Button title='Login' onPress={this.props.toggleLogin}/> 
     ); 
    } 

} 

class LogoutScreen extends Component { 

    render() { 
     return (
      <Button title='Logout' onPress={this.props.toggleLogin} /> 
     ); 
    } 

}