Question

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

我从标题组件中的道具中获得了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>
    )
}

无法进行条件渲染

1 个答案: