使用状态导航到另一个 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

通过 props 传递函数

    <LoginForm onLogin={() => setCreate(true)} />

来自 LoginForm.js

需要时致电props.onLogin()

Answer 2

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 handleCreateClick={handleCreateClick}/>}
</div>

然后在 LoginForm 内部对其进行解构

const LoginForm = (props)=>{
 const {handleCreateClick}= props;
 const handleSubmit=()=>{
 // your form submission logic
 handleCreateClick()
}
return(
<form onSubmit={handleSubmit}>
//your form inputs 
</form>
)
}