孩子没有渲染状态变化

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