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

状态更改实际上正常工作，因为我可以看到状态更改，但是当呈现按钮时，它不呈现子文本＆＃34;注销＆＃34;。

如果我直接在主渲染方法中使用Log Out，它显示正常，但是当我通过renderContent（）方法调用它时，它不会显示＆＃34; Logout＆＃34;文本。

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

儿童不会在状态变化上呈现

1 个答案: