孩子沒有渲染狀態變化

Question

我正在研究React-Native中的應用程序，我正在嘗試渲染帶有子項的組件。如果我直接使用組件，它會按預期運行100％，但是如果我從條件（切換）語句返回它，它不會呈現子項。然而，邏輯運行正常，因爲我實際上可以看到狀態變化。

我已經通過另一個組件中的條件使用正確工作了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 };