Question

我正在尝试创建一个标题组件，该组件会根据您正在查看的屏幕而变化。但是，如果我尝试创建一些动态按钮，则子组件将无法正常工作。

我已经将标题的每个部分拆分为较小的组件，问题是除非我自己添加每个按钮，否则标题HeaderRightSide的右侧不会呈现。

const screenIcon = {
    Home: 'home',
    Settings: 'tools'
}


export class AppHeader extends Component {
    static propTypes = {
        screenName: PropTypes.string.isRequired,
        navigation: PropTypes.object.isRequired,
        googleUser: PropTypes.object.isRequired,
        UserSignIn_logOut: PropTypes.func.isRequired
    }
    signOut = async () => {
        try {
            await GoogleSignin.revokeAccess();
            await GoogleSignin.signOut();
        } catch (error) {
            // console.error(error);
        } finally {
            this.props.UserSignIn_logOut({});
            this.props.navigation.navigate('SignIn');
        }
    }
    componentDidMount() {
        console.log(this.props.navigation.state)
    }
    render() {
        return (
            <Header>
                <HeaderLeftSide screenName={this.props.screenName} />
                <HeaderBody screenName={this.props.screenName} />
                <HeaderRightSide screenName={this.props.screenName} navigation={this.props.navigation} />
            </Header>
        )
    }
}

HeaderLeftSide = (props) => (
    <Left>
        <Button transparent>
            <Icon name={screenIcon[props.screenName]} />
        </Button>
    </Left>
)

HeaderBody = (props) => (
    <Body>
        <Title>{props.screenName}</Title>
    </Body>
)

HeaderRightSide = (props) => (
    <Right>
        {Object.keys(screenIcon).forEach(screen => 
           ( <Button transparent>
            <Icon name={screenIcon[screen]} />
        </Button>)
        )}
    </Right>
)


const mapStateToProps = (state) => ({
    googleUser: state.UserSignInReducer.googleUser
})

const mapDispatchToProps = {
    UserSignIn_logOut: () => {
        dispatch(UserSignIn_logOut());
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(AppHeader)

Answer 1

我只需要更改每个地图即可。正确的代码：

HeaderRightSide = (props) => (
    <Right>
        {Object.keys(screenIcon).map(screen => (
            <Button transparent>
                <Icon name={screenIcon[screen]} />
            </Button>
        )
        )}
    </Right>
)

反应本地渲染子组件

1 个答案: