编程新手必备：React 30 秒速学选项卡组件！

2023-09-19 11:03:50

现在，让我们开始我们的 30 秒速成班，快速创建属于自己的 React 选项卡组件！

首先，你需要一个基本的 React 项目。如果你还没有，可以按照官方指南创建一个新的项目。

接下来，你需要安装所需的依赖项。对于选项卡组件，你需要安装 react-tabs 和 react-router-dom。你可以使用以下命令安装它们：

npm install react-tabs react-router-dom

安装完成后，你需要在你的项目中创建一个新的组件文件。你可以将它命名为 Tabs.js。在这个文件中，你将编写选项卡组件的代码。

以下是 Tabs.js 文件的示例代码：

import React from "react";
import { Tab, Tabs, TabList, TabPanel } from "react-tabs";
import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";

const TabsComponent = () => {
  return (
    <Router>
      <div>
        <Tabs>
          <TabList>
            <Tab>
              <Link to="/">Home</Link>
            </Tab>
            <Tab>
              <Link to="/about">About</Link>
            </Tab>
            <Tab>
              <Link to="/contact">Contact</Link>
            </Tab>
          </TabList>

          <TabPanel>
            <Switch>
              <Route exact path="/">
                <h1>Home</h1>
              </Route>
              <Route path="/about">
                <h1>About</h1>
              </Route>
              <Route path="/contact">
                <h1>Contact</h1>
              </Route>
            </Switch>
          </TabPanel>
        </Tabs>
      </div>
    </Router>
  );
};

export default TabsComponent;

现在，你需要将这个组件导入你的 App.js 文件并将其渲染到页面上。以下是 App.js 文件的示例代码：

import React from "react";
import TabsComponent from "./Tabs";

const App = () => {
  return (
    <div>
      <TabsComponent />
    </div>
  );
};

export default App;

现在，你可以启动你的项目并查看选项卡组件是否正常工作。

就是这样！你已经成功创建了你的第一个 React 选项卡组件。

现在，让我们更进一步，让选项卡组件更具互动性。

你可以使用 useState 钩子来跟踪当前选定的选项卡。以下是修改后的 Tabs.js 文件代码：

import React, { useState } from "react";
import { Tab, Tabs, TabList, TabPanel } from "react-tabs";
import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";

const TabsComponent = () => {
  const [selectedTab, setSelectedTab] = useState(0);

  const handleTabChange = (index) => {
    setSelectedTab(index);
  };

  return (
    <Router>
      <div>
        <Tabs selectedIndex={selectedTab} onSelect={handleTabChange}>
          <TabList>
            <Tab>
              <Link to="/">Home</Link>
            </Tab>
            <Tab>
              <Link to="/about">About</Link>
            </Tab>
            <Tab>
              <Link to="/contact">Contact</Link>
            </Tab>
          </TabList>

          <TabPanel>
            <Switch>
              <Route exact path="/">
                <h1>Home</h1>
              </Route>
              <Route path="/about">
                <h1>About</h1>
              </Route>
              <Route path="/contact">
                <h1>Contact</h1>
              </Route>
            </Switch>
          </TabPanel>
        </Tabs>
      </div>
    </Router>
  );
};

export default TabsComponent;