javascript - 自定义可重用组件在一种情况下工作，而在另一种情况下工作（React Native）？

Question

我无法看到“注销”方面的组件。它不是完全不可见的，但不是块样式，而是只有一行可见，没有文本。但是，相同的可重用 Button 组件与“登录按钮”一起使用。

renderContent() {
    switch (this.state.loggedIn) {
        case true:
            return <Button> Log Out </Button>;
        case false:
            return <LoginForm />;
        default:
            return <Spinner size="large" />;
    }
}

render() {
    return (
        <View>
            <Header headerText="Authentication" />
            {this.renderContent()}
        </View>
    );

当用户未登录时，输出如下： Authentication 标头下方的深蓝色线是

但是，带有“登录”的相同按钮效果很好。

我试图渲染一个文本组件来代替按钮组件，它也可以工作。似乎只是这个特定条件渲染中的 Button 不起作用！

我的按钮组件：

const Button = ({ onPress, children }) => {
const { buttonStyle, buttonTextStyle } = styles;
console.log({ children });
return (
    <TouchableOpacity onPress={onPress} style={buttonStyle}>
        <Text style={buttonTextStyle}>
            {children}
        </Text>
    </TouchableOpacity>
);

};

登录工作的代码块：

renderButton() {
    if (this.state.loading) {
        return <Spinner size="small" />
    }

    return (
        <Button onPress={this.onButtonPress.bind(this)}>
            Log In
        </Button>
    );
}

标签： javascriptcssreactjsreact-native