Не могу сделать условный рендеринг

Question

У меня есть компонент Header, который я хотел бы использовать на нескольких экранах с несколькими вариантами использования, например на MainScreen. Я хочу отображать только значок профиля, тогда как на других экранах я хотел бы использовать как backButton, так и значок профиля.

Я получаю 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>
    )
}