如何将 useState 从一个组件传递到另一个组件？

Question

我正在尝试创建一个登录模式，当在 Login.js 中单击注册按钮时，该模式会更改为注册模式。 目前，我有一个带有登录按钮的标题。 单击登录按钮时，会显示当前状态（默认值为 ）。 我希望 Login.js 中的注册按钮能够更新状态，以便将该模式更改为 .

页眉.js：

import React, { useState } from 'react';
import Login from "../modals/Login";
import Signup from "../modals/Signup";

export default function Header() {

    const [lmodal, setModal] = useState(<Login />);

    return (
...
    {lmodal}
...
)
}

登录.js

import React, { useState } from 'react';
import Signup from "../modals/Signup";

export default function Login() {

return (
...
**// Clicking the button should change the state from Header.js to <Signup />**
 <button onClick={() => { setModal(<Signup />) }} className="btn btn-primary">Signup</button>
...
)
}

我在这里先向您的帮助表示感谢！

Answer 1

您不能在 Login 组件中设置模式，因为 setModal 在 Header 组件中。

Answer 2

状态和组件在概念上是不同的。 为了达到想要的行为，你可以做的是使用状态来调整组件，例如：

import React, { useState } from 'react';
import Login from "../modals/Login";
import Signup from "../modals/Signup";

export default function Header() {

    const [modal, setModal] = useState(false);

    return (
...
    {modal && <Login />}
    <Signup modal={modal} setModal={setModal}/>
...
)}

import React, { useState } from 'react';
import Signup from "../modals/Signup";

export default function Login({modal, setModal}) {

return (
...
 <button onClick={() => setModal(true)} className="btn btn-primary">Signup</button>
...
)
}