无法进行条件渲染

Question

我有一个 Header 组件，我想在具有多个用例的多个屏幕中使用它，例如在 MainScreen 我只想显示配置文件图标，而在其他屏幕中我想同时使用 backButton 和配置文件图标。

我从 Header Component 中的 props 得到 isProfileIconVisible 和 isBackButtonIconVisible。

        this.state = {
            isProfileIconVisible: props.isProfileIconVisible,
            isBackButtonIconVisible: props.isBackButtonIconVisible
        }

我有渲染功能。

    _renderProfileIcon () {
        let profileIcon = (
        <View style={styles.profileButtonContainer} >
            <CustomIconButton
                onPress={this.props.onProfilePress}
            ></CustomIconButton>
        </View>
        );
        return profileIcon;
    };

    _renderBackButtonIcon () {
        let backButonIcon = (
        <View style={styles.backButtonContainer} >
            <CustomIconButton
                onPress={this.props.onBackPress}
                iconName={"arrow-left"}
            ></CustomIconButton>
        </View>
        );
        return backButonIcon;
    };

在主渲染函数中，我正在进行条件渲染：

    render() {
        const { style, isBackButtonIconVisible, isProfileIconVisible, ...otherProps } = this.props;
        return (
            <View style={styles.container}>
                {isBackButtonIconVisible ? this._renderBackButtonIcon : null}
                <View style={styles.textContainer} >
                    <Text style={styles.text}>{this.props.text}</Text>
                </View>
                {isProfileIconVisible ? this._renderProfileIcon : null}
            </View>
        )
    }

使用此设置，我无法呈现 ProfileIcon 或 BackButtonIcon。 我得到了 text 道具，但没有图标。

标题组件propTypes 和defaultProps：

Header.propTypes = {
    onBackPress: PropTypes.func,
    onProfilePress: PropTypes.func,
    text: PropTypes.string,
    backButtonIconName: PropTypes.string,
    isProfileIconVisible: PropTypes.bool,
    isBackButtonIconVisible: PropTypes.bool,
};
Header.defaultProps = {
    backButtonIconName: 'keyboard-backspace',
    isProfileIconVisible: true,
    isBackButtonIconVisible: true,
}

这就是我从另一个组件调用 Header 组件的方式：

        <Header
            text={"Welcome!"}
            isProfileIconVisible={true}
            isBackButtonIconVisible={false}
            onProfilePress={this.handleProfileButtonPress}
            style={styles.headerContainer}
          />

你能帮我在哪里做错了吗？ 谢谢。

Answer 1

你的_renderBackButtonIcon和_renderProfileIcon是函数，你需要调用它们来获取它们的返回值：

render() {
    const { style, isBackButtonIconVisible, isProfileIconVisible, ...otherProps } = this.props;
    return (
        <View style={styles.container}>
            {isBackButtonIconVisible ? this._renderBackButtonIcon() : null}
            <View style={styles.textContainer} >
                <Text style={styles.text}>{this.props.text}</Text>
            </View>
            {isProfileIconVisible ? this._renderProfileIcon() : null}
        </View>
    )
}

注意this._renderBackButtonIcon 和this._renderProfileIcon 之后的()。

---

旁注：这里没有理由使用...otherProps：

const { style, isBackButtonIconVisible, isProfileIconVisible, ...otherProps } = this.props;

你从不使用它。

有一个参数用于将text 添加到该列表并使用它，而不是返回值中的this.props.text：

render() {
    const { style, isBackButtonIconVisible, isProfileIconVisible, text } = this.props;
    return (
        <View style={styles.container}>
            {isBackButtonIconVisible ? this._renderBackButtonIcon() : null}
            <View style={styles.textContainer} >
                <Text style={styles.text}>{text}</Text>
            </View>
            {isProfileIconVisible ? this._renderProfileIcon() : null}
        </View>
    )
}