Kinder, die nicht auf Zustandswechsel rendern

Question

Ich arbeite an einer App in React-Native und ich versuche, eine Komponente mit Kindern zu rendern. Wenn ich die Komponente direkt verwende, funktioniert sie zu 100% wie erwartet, aber wenn ich sie von einer bedingten (switch) -Anweisung zurückgebe, werden keine Kinder gerendert. Die Logik funktioniert jedoch richtig, weil ich die Zustandsänderung tatsächlich sehen kann.

Ich habe es funktioniert 100% ordnungsgemäß über bedingte Verwendung in einer anderen Komponente, aber es wird in diesem speziellen Fall nicht funktionieren. Es wird korrekt importiert, da die Schaltfläche rendert, aber ohne den untergeordneten Text darin, sodass nur die Schaltfläche ohne Beschriftungstext angezeigt wird.

App.js

import React, { Component } from 'react'; 
import { View } from 'react-native'; 
import firebase from 'firebase'; 
import { LoginForm } from './components/LoginForm'; 
import { Header, Button, Spinner } from './components/common'; 

class App extends Component { 
    state = { loggedIn: null }; 

    componentWillMount() { 
     firebase.initializeApp({ 
      apiKey: 'nope', 
      authDomain: 'nope', 
      databaseURL: 'nope', 
      projectId: 'nope', 
      storageBucket: 'nope', 
      messagingSenderId: 'nope' 
    }); 

    firebase.auth().onAuthStateChanged((user) => { 
     if (user) { 
      this.setState({ loggedIn: true }); 
     } else { 
      this.setState({ loggedIn: false }); 
     } 
    }); 
} 

    renderContent() { 
     switch (this.state.loggedIn) { 
      case true: 
       return (
        <Button onPress={() => firebase.auth().signOut()}> 
        Log Out 
        </Button> 
       ); 
      case false: 
       return <LoginForm />; 
      default: 
       return <Spinner size="large" />; 
     } 
    } 

    render() { 
     return (
      <View> 
       <Header headerText="Authentication" /> 
       {this.renderContent()} 
      </View> 
     ); 
    } 
} 

export default App; 

Button.js

import React from 'react'; 
import { Text, TouchableOpacity } from 'react-native'; 

const Button = ({ onPress, children }) => { 
    const { buttonStyle, textStyle } = styles; 

    return (
     <TouchableOpacity onPress={onPress} style={buttonStyle}> 
      <Text style={textStyle}> 
       {children} 
      </Text> 
     </TouchableOpacity> 
    ); 
}; 

const styles = { 
    buttonStyle: { 
     flex: 1, 
     alignSelf: 'stretch', 
     backgroundColor: '#fff', 
     borderRadius: 5, 
     borderWidth: 1, 
     borderColor: '#007aff', 
     marginLeft: 5, 
     marginRight: 5 
    }, 
    textStyle: { 
     alignSelf: 'center', 
     color: '#007aff', 
     fontSize: 16, 
     fontWeight: '600', 
     paddingTop: 10, 
     paddingBottom: 10 
    } 
}; 

export { Button }; 

Die Zustandsänderung ist in der Tat richtig funktioniert, wie ich die Zustandsänderung sehen kann, aber wenn der Knopf gerendert wird der untergeordnete Text "Abmelden" nicht wiedergegeben.

Wenn ich die Abmeldung direkt in der Haupt-Rendermethode verwende, wird sie zwar gut angezeigt, aber wenn ich sie über die renderContent() -Methode aufruft, wird der Abmeldetext nicht angezeigt.

Answer 1

Sie sollten den Button-Text als Prop statt als Kind weitergeben.

renderContent() { 
     switch (this.state.loggedIn) { 
      case true: 
       return <Button onPress={() => firebase.auth().signOut()} btnText="Log Out" />; 
      case false: 
       return <LoginForm />; 
      default: 
       return <Spinner size="large" />; 
     } 
    } 

Button.js

import React from 'react'; 
import { Text, TouchableOpacity } from 'react-native'; 

const Button = ({ onPress, children }) => { 
    const { buttonStyle, textStyle } = styles; 

    return (
     <TouchableOpacity onPress={onPress} style={buttonStyle}> 
      <Text style={textStyle}> 
       {this.props.btnText} 
      </Text> 
     </TouchableOpacity> 
    ); 
}; 

const styles = { 
    buttonStyle: { 
     flex: 1, 
     alignSelf: 'stretch', 
     backgroundColor: '#fff', 
     borderRadius: 5, 
     borderWidth: 1, 
     borderColor: '#007aff', 
     marginLeft: 5, 
     marginRight: 5 
    }, 
    textStyle: { 
     alignSelf: 'center', 
     color: '#007aff', 
     fontSize: 16, 
     fontWeight: '600', 
     paddingTop: 10, 
     paddingBottom: 10 
    } 
}; 

export { Button };