javascript - 使用 react 切换钩子(Hook)在两个组件/按钮之间切换{显示一个组件并隐藏另一个}

Question

我正在尝试创建一个工作平台，我们可以在其中以“招聘人员”或“候选人”的身份注册/登录。我面临的复杂情况是我已经为招聘人员和候选人创建了一个表格。现在我正在尝试在这些组件之间切换。我已经走到这一步

import useToggle from "@rooks/use-toggle"

export default function SignUp() {

    const [recruitForm, setRecruitForm] = useToggle(true);
    const [candidateForm, setCandidateForm] = useToggle(false);

    }

    return (
                     <div>
                       <form>
                            <div className="text-md tracking-wide p-0">
                                SignUp Form
                            </div>

                            <div className="flex flex-row gap-8">
                                <div>
                                    <button
                                        onClick={setRecruitForm}>
                                        Recruiter
                                    </button>
                                   <>
                                        {recruitForm && <RecruiterForm /> }
                                    </>
                                </div>

                                <div>
                                    <button
                                        onClick={setCandidateForm}
                                        type="button">
                                      Candidate
                                    </button>
                                    <>
                                        {candidateForm && <CandidateForm /> }
                                    </>
                                </div>
                            </div>
                        </form>
                    </div>
        </div>
    )
}

组件在它们自己的上下文中。但我什至想不出如何在不弄乱样式的情况下处理或切换组件的想法，需要的方式是打开一个实例，关闭另一个难题/表单。

我正在分享我使用 useToggle react rooks 获得的输出关于如何使用任何其他 Hook 或使用 useToggle Hook 本身实现它的任何想法，或者请让我知道我做错了什么。

https://www.loom.com/share/d2251bc3b9594782aa0a17aae92c997e {这是我得到的结果}

Answer 1

因为它们是两个项目，所以您可以使用一个 bool 值和一个状态

    const [active, setActive] = useState(false)


    return (
                         <div>
                           <form>
                                <div className="text-md tracking-wide p-0">
                                    SignUp Form
                                </div>

                                <div className="flex flex-row gap-8">
                                    <div>
                                        <button
                                            onClick={()=>setActive(true)}>
                                            Recruiter
                                        </button>
                                       <>
                                            {active && <RecruiterForm /> }
                                        </>
                                    </div>

                                    <div>
                                        <button
                                            onClick={()=>setActive(false)}
                                            type="button">
                                          Candidate
                                        </button>
                                        <>
                                            {!active && <CandidateForm /> }
                                        </>
                                    </div>
                                </div>
                            </form>
                        </div>
            </div>
        )
    }