如何在 ReactJS 中重新渲染孩子？

Question

问题背景

我有一个名为<Layout/> 的组件，其中包含我的页眉和页脚。它像这样包装了我所有的路线：

<Layout>
    <div className="container">
        <Route path="/sign-in" exact component={SignIn}/>
        <ProtectedRoute path="/" exact component={Home}/>
        <ProtectedRoute path="/statistics" exact component={Statistics}/>
        ...
        ...
    </div>
</Layout>

我的<Layout/> 组件是这样定义的：

const Layout = (props) => {
    return (
        <div>
            <Header/>
                {props.children}
            <Footer/>
        </div>
    );
}

我这样做是为了不必在每个组件中都包含页眉和页脚。

问题

在我的标题组件中，我使用了auth 实例，它指示用户是否已登录。 auth 在用户登录后发生变化。但是，即使 auth 发生变化，<Layout/> 中的 <Header/> 组件也不会重新呈现。我必须手动刷新它以合并更改。
我的<Header/> 组件定义为：

import auth from '../../auth';

const Header = () => {
    return (
                {auth.isAuth() ? 
                    //render icon A
                : null
                }
                    <div>
                        Healthcare Management System      //header title
                    </div>
                {auth.isAuth() ? 
                    //render icon B
                : null
                }
            </div>
    );
}
export default Header;

这是我的auth 班级：

class Auth{
    constructor(){
        this.authenticated = JSON.parse(sessionStorage.getItem('profile'));
    }
    login(cb){
        this.authenticated = JSON.parse(sessionStorage.getItem('profile'));
        cb();
    }
    logout(cb){
        this.authenticated = null;
        cb();
    }
    isAuth(){
        return this.authenticated;
    }
}
export default new Auth();

我需要什么

我想要的应该很简单；当auth.isAuth() == null 时，不显示图标，只显示标题（这行为正确）。 auth.isAuth() != null 何时显示图标 A 和 B（这行为不正确，需要我刷新页面才能呈现图标）。
不知何故，我希望<Layout/> 组件重新渲染一次auth changes。谢谢！

Answer 1

React 组件仅在其 props 或其状态发生变化时才会重新渲染，因此您应该将 auth 置于可以设置如下的状态：

import auth from '../../auth';

const Layout = (props) => {
    const [authenticated, setAuthenticated] = React.useState(false);
    React.useEffect(() => {
      if(!auth.isAuth()) {
          setAuthenticated(false);      
      } else {
          setAuthenticated(true);      
      }
    }, []);   // this useEffect logic is not working, you need to determine how you want to configure the condition in which authenticated state is set
    return (
        <div>
            <Header authenticated={authenticated} />
                {props.children}
            <Footer/>
        </div>
    );
}

标题组件：

const Header = ({ authenticated }) => {
    return (
                {authenticated ? 
                    //render icon A
                : null
                }
                    <div>
                        Healthcare Management System      //header title
                    </div>
                {authenticated ? 
                    //render icon B
                : null
                }
            </div>
    );
}
export default Header;