Reactjs AWS放大定制问候语

我已经创建了一个包装器，它使用Amplify withAuthenticator HoC围绕路由对象（react router dom），这样我就可以确保它们只对登录用户可用，并为未登录的用户显示Amplify登录屏幕。这是完美的，登录后，我可以看到整个页面的顶部都有问候栏（白色栏上写着“Hello X”，旁边有一个橙色的注销按钮）。我不仅想修改这个按钮的样式（我更喜欢绿色的按钮），而且我还想在左侧添加一些菜单按钮以用于导航

不幸的是，无论我尝试什么，我都会在问候语下方创建另一个栏，或者问候语就消失了。我试过这个：

import React from 'react';
import { ConfirmSignIn, ConfirmSignUp, ForgotPassword, RequireNewPassword, SignIn, SignUp, VerifyContact, withAuthenticator, Greetings } from 'aws-amplify-react';
import AuthGreeting from './views/AuthGreeting'

export const AuthRouter = props => (
    <div>
        {props.children}
    </div>
)

export default withAuthenticator(AuthRouter, false,[
    <AuthGreeting override='Greetings'/>,
    <ConfirmSignIn/>,
    <VerifyContact/>,
    <SignUp/>,
    <ConfirmSignUp/>,
    <ForgotPassword/>,
    <RequireNewPassword />
]);

从“React”导入React；
从“aws amplify react”导入{ConfirmSignIn，ConfirmSignUp，ForgotPassword，RequirementPassword，SignIn，SignUp，VerifyContact，withAuthenticator，Greetings}；
从“/views/AuthGreeting”导入AuthGreeting
导出常量AuthRouter=props=>(
{props.children}
)
使用验证器导出默认值（AuthRouter，false[
,
,
,
,
,
,
]);

以及

export const AuthRouter = props => (
    <Authenticator hide={['Greetings']}>
        <AuthGreeting override={'Greetings'}/>
        {props.children}
    </Authenticator>

export default AuthRouter;

export const AuthRouter=props=>(
{props.children}
导出默认路由器；

我尝试了使用和不使用override参数

我的课程是：

import React, { Component } from 'react';
import { NavBar, Nav, NavRight, Greetings } from 'aws-amplify-react';

class AuthGreeting extends Greetings{
    constructor(props){
        super(props);
    }

render()
{
    const theme = this.props.theme;
    return(
        <NavBar theme={theme}>
            <Nav theme={theme}>
                <NavRight theme={theme}>
            <p>Test</p>
            </NavRight>
            </Nav>
        </NavBar>
    )
}
}

export default AuthGreeting;

import React，{Component}来自'React'；
从“aws amplify react”导入{NavBar、Nav、NavRight、问候语}；
类AuthGreeting扩展问候语{
建造师（道具）{
超级（道具）；
}
render（）
{
const theme=this.props.theme；
返回(
试验

)
}
}
导出默认格式；

你知道我做错了什么吗？如果你对我如何用定制的问候语栏替换默认的问候语栏有一些建议，那就太好了

提前感谢：）

---

关于Christian，我现在用另一种方式解决了这个问题。我用

export default withAuthenticator(AuthRouter, false) //Show no Greetings

此外，我还通过

Auth.currentAuthenticatedUser({
bypassCache: false}).then(data => this.login(data)) //save username and groups in redux if available
.catch(err => this.logout());} //clear username and groups in redux

并添加一个监听器，该监听器将在用户每次登录或注销时更新redux

const listener = async (data) => {
    switch (data.payload.event) {

        case 'signIn':
            logger.error('user signed in');
            await this.login(data.payload.data)
            break;
        case 'signOut':
            logger.error('user signed out');
            await this.logout()
            break;          
    }
}

Hub.listen('auth', listener);

我使用index.js中的StoreProvider将这两个组件都添加到App.js的componentDidMount（）中，以便访问Redux

我的包装器还加载另一个包装器，在其中检查用户是否登录了redux，然后显示菜单

这样，我还可以检查用户是否是组的成员，因此只显示他有权查看的菜单项