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

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

CCD_ 2是某种逻辑依赖于CCD_ 3的结果。代码是这样的：

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"
}

所以我的问题是：

使用react-hooks是否合理？

如果是，如何实施？

Answer 1

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

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