如何在 ReactJS 中 re-render children？

Question

问题背景

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

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

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

问题

在我的 header 组件中，我使用实例 auth 指示用户是否登录。 auth 在用户登录后发生变化。但是，即使 auth 发生变化，我在 <Layout/> 中的 <Header/> 组件也不是 re-rendered。我必须手动刷新它以合并更改。
我的 <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:

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 后变为 re-render。谢谢！

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;

如何在 ReactJS 中 re-render children？

How to re-render children in ReactJS?

reactjs

render

higher-order-components

问题背景

问题

我需要什么