Javascript Can'；不进行条件渲染

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

我从Header组件中的道具中获得

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

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

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

你能帮我找出哪里做错了吗？

---

谢谢。

您的

\u renderBackButtonIcon

和

\u 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>
    )
}

你从不使用它

有一个参数用于将

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

render（）{
const{style，isBackButtonIconVisible，isProfileIconVisible，text}=this.props；
返回(
{isBackButtonConVisible？这是。_renderBackButtonCon（）：null}
{text}
{isProfileIconVisible？这是。_renderProfileIcon（）：null}
)
}

非常感谢，这些小括号解决了问题

…其他道具

仅用于实验目的。你说得对，我从来没用过。

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

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

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