使用状态导航到另一个React组件

Question

我有一个简单的React应用来显示游戏。

页面顶部有3个按钮，用于控制用户在单击时可以到达的位置：

[Games]   |   [Create]    |    [Login]

对于我的GamesList.js，CreateGame.js和LoginForm.js组件。

导航是通过像这样的React钩子简单控制的：

// *** GamerPagesNavigation.js

const [showGames, setGames] = useState(true);
const [showCreate, setCreate] = useState(false);
const [showLogin, setLogin] = useState(false);


const handleGamesClick = useCallback(e => { (setCreate(false) || setLogin(false) ) || setGames(true) });
const handleCreateClick = useCallback(e => { (setGames(false) || setLogin(false) ) || setCreate(true) });
const handleLoginClick = useCallback(e => { (setCreate(false) || setGames(false) ) || setLogin(true) });

<div>
    {showGames && <GamesList />}
</div>
<div>
    {showCreate && <CreateGame />}
</div>
<div>
    {showLogin && <LoginForm />}
</div>

而且效果很好！ ：）

所以效果很好！

但是现在，我的LoginForm.js组件上有一个用于登录的按钮。

提交并通过身份验证后，我希望将用户定向到登录页面。

但是我不知道如何从LoginForm.js组件转到CreateGame组件。

因为我的状态是在GamerPagesNavigation.js组件中控制的，所以我无法弄清楚如何在另一个组件中获取状态值。

当我在LoginForm.js组件中尝试此操作时，它说showCreate未定义：

setCreate(true)

我知道了，因为它是在另一个React组件文件中定义的。

所以有办法吗？

谢谢！ ：）

Answer 1

通过道具发送功能

<LoginForm onLogin={() => handleLoginClick} />

从LoginForm.js

在需要时单击props.onLogin()