孩子们不渲染状态变化

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

状态更改实际上工作正常，我可以看到状态更改，但是当呈现按钮时，它不会呈现子文本“注销”。

如果我直接在主渲染方法中使用 Log Out，它会显示正常，但是当我通过 renderContent() 方法调用它时，它不会显示“Log Out”文本。

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