先决条件在阅读本文之前，您应该对 reactjs 及其核心概念有基本的了解。确保您的计算机上安装了 node.js 和 npm（节点包管理器）。
设置新的 react 项目首先，让我们使用 create react app 创建一个新的 react 项目，该工具有助于创建具有基本项目结构的新 react 项目。打开终端并运行以下命令：
npx create-react-app tab-example
方法一：使用useref hookuseref 钩子是一个内置的 react 钩子，它允许我们创建对组件中元素的可变引用。我们可以使用它来管理选项卡组件中的活动选项卡状态。
示例在下面的代码中，我们首先导入必要的依赖项并设置我们的功能组件选项卡。在组件内部，我们创建一个名为 tabsref 的 useref 钩子来存储选项卡对象的数组。这允许我们引用选项卡及其属性。我们还使用 usestate 挂钩创建一个名为 activetab 的状态变量来跟踪当前活动的选项卡。 handletabclick 函数负责在单击选项卡时更新 activetab 状态。 rendertabs 函数迭代 tabsref.current 数组并呈现选项卡标题。它将“活动”类添加到当前活动选项卡。最后，我们返回选项卡和活动选项卡内容的 jsx 标记。
import react, { useref, usestate } from 'react';import './tabs.css'; // import the css fileconst 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) => ( <div key={index} onclick={() => handletabclick(index)} classname={activetab === index ? 'active' : ''} > {tab.title} </div> )); }; return ( <div classname=tabs-container> {rendertabs()} <div classname=tab-content> {tabsref.current[activetab].content} </div> </div> );};export default tabs; return ( <div classname=tabs-container> {rendertabs()} <div classname=tab-content> {tabsref.current[activetab].content} </div> </div> );};export default tabs;
输出
方法2：使用usereducer hookusereducer 钩子是另一个内置的 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) => ( <div key={index} onclick={() => handletabclick(index)} classname={state.activetab === index ? 'active' : ''} > {tab.title} </div> )); }; return ( <div classname=tabs-container> {rendertabs()} <div classname=tab-content>{state.tabs[state.activetab]?.content}</div> </div> );};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) => ( <div key={index} onclick={() => handletabclick(index)} classname={activetab === index ? 'active' : ''} > {tab.title} </div> )); }; return ( <div classname=tabs-container> {rendertabs()} <div classname=tab-content>{tabs[activetab]?.content}</div> </div> );};export default tabs;
输出
结论在本文中，我们讨论了如何在 reactjs 中创建选项卡。我们介绍了 useref 钩子对于管理可变引用很有用，usereducer 钩子提供了一种更结构化的状态管理方法，而 state 和 props 方法适合更简单的选项卡实现。通过了解这些技术，您可以在 react 应用程序中创建交互式且用户友好的选项卡组件。
以上就是如何在 reactjs 中创建选项卡？的详细内容。