子どもが状態変更でレンダリングしない

Question

私はReact-Nativeでアプリを開発しています。子供を使ってコンポーネントをレンダリングしようとしています。コンポーネントを直接使用すると、期待どおり100％機能しますが、条件付き（switch）ステートメントから返すと子をレンダリングしません。しかし、私は実際に状態の変化を見ることができるので、ロジックは適切に機能しています。

別のコンポーネントで条件付きで100％正しく動作していますが、この特定のケースでは動作しません。ボタンはレンダリングされるため正しくインポートされますが、その内部に子テキストはなく、ラベルテキストのないボタンだけを表示します。

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

私は状態変化を見ることができるように状態変化が、正常に動作し、実際にですが、ボタンがあるときレンダリングされても、子テキストは「ログアウト」されません。

メインのレンダリングメソッドで直接ログアウトを使用すると表示されますが、renderContent（）メソッドで呼び出すと「ログアウト」テキストは表示されません。

Answer 1

子としてではなく、ボタンテキストを小道具として渡す必要があります。

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