使中的选项卡对两个不同的页面作出反应

Question

我试图在reactjs中制作选项卡，但无法在中完成

我想要的是在登录和注册页面之间有标签

这两个页面都有一个单独的组件

我知道我遗漏了一些东西，但不确定在哪里

这是我的代码

import React, { useState } from "react";
import Login from "./Login";
import SignUp from "./SignUp";
const Tabs = () => {
const [login, setLogin] = useState(true);
const [signup, setSignUp] = useState(true);
const handleLogin = () => {
setLogin(true);
setSignUp(false);
};
return (
<>
<div className="tabs">
<button onClick={() => setLogin(true)}> Üyelik Girişi</button>
<button onClick={() => setLogin(false)}>Yeni Uyelik</button>
{signup && <SignUp />}
{/* {login && <Login />} */}
</div>
</>
);
};
export default Tabs;

所以，我不知道如何将功能引导到所需的页面

Answer 1

你的问题有点绝对，但让我尽可能多地回答。

我认为你使用的是react路由器，你可以使用react路由器useNavigate钩子。

它看起来像

const navigate = useNavigate();
const handleLogin = ()=> {
navigate('/login');
};

如果您没有使用react路由器和通过state管理路由；

它看起来像

const handleLogin = ()=> {
setLogin(true);
setSignup(false);
};
// do something for signup hanlder

return (
<div>
{
// your tab buttons
}
{signup && <SignupPage />}
{login && <LoginPage />}
</div>
)

Answer 2

如果你想用state实现这种行为，你可以这样做。我在代码中添加了注释，这样您可以更好地理解代码。

const App = () => {
// depending upon this state you can show different JSX
const [pageIndex, setPageIndex] = useState(0);
/// function that return JSX FOR LOGIN
const handleLoginJSX = () => {
return <div>... login JSX </div>;
};
/// function that return JSX FOR SINGUP
const handleSingUpJSX = () => {
return <div>... sing up JSX </div>;
};

return (
<div>
{/* tab code */}
<ul>
<li onClick={() => setPageIndex(0)}>Login </li>
<li onClick={() => setPageIndex(1)}>Sing up</li>
</ul>
{/* tab code end */}
{/* YOUR JSX */}
{pageIndex == 0 ? handleLoginJSX() : handleSingUpJSX()}
{/* YOUR JSX  END*/}
</div>
);
}; 

Answer 3

您所指的概念称为路由。添加多个"；页面"；或"；视图"；在React中是通过使用预先构建的库，即react-router-dom，而不是以这种方式处理它。

然后，您可以使用Link元素将您路由到不同的页面(例如，从yoursite.com/login导航到yoursite.com/signup(，它将保留浏览器历史记录，以便用户可以像您期望的那样使用后退和前进按钮。

在此处查看此库的文档：https://reactrouter.com/en/main/getting-started/tutorial

Answer 4

所以，这段代码对我来说很好呈现两个组件的问题是因为在App.js 中使用路由器

在我移除它之后，它对我的很好

import { Tab, Tabs, TabList, TabPanel } from "react-tabs";
// import "react-tabs/style/react-tabs.css";
import "./Tabs.css";
import React from "react";
import Login from "./Login";
import SignUp from "./SignUp";
const LoginTabs = () => {
return (
<>
<Tabs>
<TabList>
<Tab>Üyelik Girişi</Tab>
<Tab>Yeni Üyelik</Tab>
</TabList>
<TabPanel>
<h2>
{" "}
<Login />{" "}
</h2>
</TabPanel>
<TabPanel>
<h2>
{" "}
<SignUp />{" "}
</h2>
</TabPanel>
</Tabs>
</>
);
};
export default LoginTabs;