如何使用钩子管理条件组件

Question

假设您有以下 index.js 代码：

const App = memo(props => {

    return (
        <Layout>
        // you can consider below code as a switch case 
        {
          {
            'NO_SESSION': <Login />,
            'NOTCONFIRMED_SESSION': <Confirm />
            'CONFIRMED_SESSION': <Home />
          }[sessionState]
        }
        </Layout>
    );
});

ReactDOM.render(<App />, document.getElementById('root'));

serviceWorker.unregister();

sessionState 是某些逻辑的结果取决于 IndexedDB。代码是这样的：

const getSessionState = () => {
   if(// there is no session) 
      return "NO_SESSION"
   else if(// there is not confirmed session)
      return "NOTCONFIRMED_SESSION"
   else if(// there is confirmed session)
      return "CONFIRMED_SESSION"
}

所以我的问题是：

Is it reasonable to do it using react-hooks?

If so how to implement?

Answer 1

是的，可以使用挂钩，但您应该问的更恰当的问题是您应该使用组件状态还是上下文。在全局状态的情况下，上下文更有意义，因为您可能需要在下游组件中使用该状态。

您可以将该状态存储在上下文中并使用 useContext 读取登录状态。

如何使用钩子管理条件组件

How to manage conditional components with using hooks

reactjs

react-hooks