在 React 中为两个不同的页面制作选项卡-解网

问：

我正在尝试在 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;

所以，我无法弄清楚的是，如何将函数定向到所需的页面

reactjs 反应标签

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>
  );
};

0赞 David-T-John 8/30/2022 #3

你所指的概念称为路由。在 React 中添加多个“页面”或“视图”的最佳方法是使用预构建的库，即而不是那样处理它。react-router-dom

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

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

0赞 Hazal Kaya 9/1/2022 #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;

上一个：单击按钮 react-tabs 时在选项卡之间导航

下一个：需要循环来简化组件

在 React 中为两个不同的页面制作选项卡

making tabs in react for two different pages

评论

评论