reactjs 是一个流行的 javascript 库，用于构建用户界面。它提供了一种基于组件的 web 开发方法，使创建交互式动态 ui 元素变得更加容易。选项卡是一种常见的 ui 模式，用于以用户友好的方式组织和呈现内容。在本文中，我们将探讨如何在 reactjs 中创建选项卡组件。
先决条件
在阅读本文之前，您应该对 ReactJS 及其核心概念有基本的了解。确保您的计算机上安装了 Node.js 和 npm（节点包管理器）。
设置新的 React 项目
首先，让我们使用 Create React App 创建一个新的 React 项目，该工具有助于创建具有基本项目结构的新 React 项目。打开终端并运行以下命令：
npx create-react-app tab-example
方法一：使用UseRef Hook
useRef 钩子是一个内置的 React 钩子，它允许我们创建对组件中元素的可变引用。我们可以使用它来管理选项卡组件中的活动选项卡状态。
示例
在下面的代码中，我们首先导入必要的依赖项并设置我们的功能组件选项卡。在组件内部，我们创建一个名为 tabsRef 的 useRef 钩子来存储选项卡对象的数组。这允许我们引用选项卡及其属性。我们还使用 useState 挂钩创建一个名为 activeTab 的状态变量来跟踪当前活动的选项卡。 handleTabClick 函数负责在单击选项卡时更新 activeTab 状态。 renderTabs 函数迭代 tabsRef.current 数组并呈现选项卡标题。它将“活动”类添加到当前活动选项卡。最后，我们返回选项卡和活动选项卡内容的 JSX 标记。
import React, { useRef, useState } from 'react';
import './Tabs.css'; // Import the CSS file
const Tabs = () => {
const tabsRef = useRef([{ title: 'Tab 1', content: 'Content 1' },
{ title: 'Tab 2', content: 'Content 2' },
{ title: 'Tab 3', content: 'Content 3' }]);
const [activeTab, setActiveTab] = useState(0);
const handleTabClick = (index) => {
setActiveTab(index);
};
const renderTabs = () => {
return tabsRef.current.map((tab, index) => (
handleTabClick(index)}
className={activeTab === index ? 'active' : ''}
>
{tab.title}
));
};
return (
{renderTabs()}
{tabsRef.current[activeTab].content}
);
};
export default Tabs;
return (
{renderTabs()}
{tabsRef.current[activeTab].content}
);
};
export default Tabs;
输出
方法2：使用useReducer Hook
useReducer 钩子是另一个内置的 React 钩子，它提供了一种以更有组织的方式管理复杂状态逻辑的方法。我们可以利用这个钩子来处理选项卡的状态更改。
示例
在下面的代码中，我们使用空的“tabs”数组初始化状态对象，并将“activeTab”属性设置为0。通过正确初始化状态对象，我们确保“state.tabs”数组不是未定义的，允许我们映射它并访问选项卡对象及其属性。
“tab-content”div 中使用的“?.content”语法可确保仅在定义了当前选项卡对象时才访问内容属性。这可以防止切换选项卡时出现错误。
您可以根据您的具体设计要求自定义选项卡标题和内容的呈现。
import React, { useReducer } from 'react';
const reducer = (state, action) => {
switch (action.type) {
case 'SET_ACTIVE_TAB':
return { ...state, activeTab: action.payload };
default:
return state;
}
};
const Tabs = () => {
const [state, dispatch] = useReducer(reducer, { tabs: [{ title: 'Tab 1', content: 'Content 1' },
{ title: 'Tab 2', content: 'Content 2' },
{ title: 'Tab 3', content: 'Content 3' }
], activeTab: 0 });
const handleTabClick = (index) => {
dispatch({ type: 'SET_ACTIVE_TAB', payload: index });
};
const renderTabs = () => {
return state.tabs.map((tab, index) => (
handleTabClick(index)}
className={state.activeTab === index ? 'active' : ''}
>
{tab.title}
));
};
return (
{renderTabs()}
{state.tabs[state.activeTab]?.content}
);
};
export default Tabs;
输出
方法3：使用State和Props
第三种方法涉及使用组件的状态和属性来管理活动选项卡。此方法更适合选项卡逻辑不太复杂的简单情况。
示例
在下面的代码中，我们在选项卡组件中定义“选项卡”数组，为选项卡标题和内容提供必要的数据。通过在组件内定义“tabs”数组，我们确保它可以在组件的范围内访问。 useState 挂钩用于管理活动选项卡状态，初始值设置为 0。handleTabClick 函数在单击选项卡时更新活动选项卡。 renderTabs 函数映射“tabs”数组并呈现选项卡标题。 “active”类根据 activeTab 状态应用于活动选项卡。
选项卡内容 div 显示当前活动选项卡的内容。
import React, { useState } from 'react';
const Tabs = () => {
const [activeTab, setActiveTab] = useState(0);
// Define the tabs array within the component
const tabs = [
{ title: 'Tab 1', content: 'Content 1' },
{ title: 'Tab 2', content: 'Content 2' },
{ title: 'Tab 3', content: 'Content 3' }
];
const handleTabClick = (index) => {
setActiveTab(index);
};
const renderTabs = () => {
return tabs.map((tab, index) => (
handleTabClick(index)}
className={activeTab === index ? 'active' : ''}
>
{tab.title}
));
};
return (
{renderTabs()}
{tabs[activeTab]?.content}
);
};
export default Tabs;
输出
结论
在本文中，我们讨论了如何在 Reactjs 中创建选项卡。我们介绍了 useRef 钩子对于管理可变引用很有用，useReducer 钩子提供了一种更结构化的状态管理方法，而 state 和 props 方法适合更简单的选项卡实现。通过了解这些技术，您可以在 React 应用程序中创建交互式且用户友好的选项卡组件。
