在前端开发中使用tabs组件来切换页面内容是非常常见的需求。今天我们要介绍的是一款npm包——react-tabs-container，它可以帮助我们快速搭建一个强大的tabs组件，支持自定义样式、多种动画效果、多种点击事件等。
安装
通过npm安装react-tabs-container。
npm install react-tabs-container
简单使用
使用react-tabs-container非常简单，首先引入组件：
import Tabs from 'react-tabs-container';
然后创建一个包含多个标签页的tabs组件。每个标签页都需要title属性和content属性。
-- -------------------- ---- -------
------
---- ---------- ---
--- - -------
------
---- ---------- ---
--- - -------
------
---- ---------- ---
--- - -------
------
-------标签页样式
我们可以通过修改样式来自定义标签页的外观。react-tabs-container提供了一些默认的css类名，我们可以直接重写这些类来实现自定义样式。
-- -------------------- ---- ------- --------------- - ----------------- -------- ------- --- ----- ----- -------------- ---- - ---------------- - -------------- ----- - ---- - ----------------- ----- ------- --- ----- ----- -------- ----- - ----------- - ----------------- -------- -------------------- -------- -
点击事件
react-tabs-container提供了一些点击事件，例如当用户点击一个标签页时，我们可以通过onTabClick事件来获得点击事件。
<Tabs onTabClick={(index, title) => console.log(index, title)}>
<div title="Tab 1">
Tab 1 content
</div>
<div title="Tab 2">
Tab 2 content
</div>
</Tabs>动画效果
react-tabs-container支持多种动画效果，默认是没有任何动画效果的。我们可以通过animationType属性来改变动画效果。
<Tabs animationType="slide">
<div title="Tab 1">
Tab 1 content
</div>
<div title="Tab 2">
Tab 2 content
</div>
</Tabs>目前支持的动画效果有：fade、slide、scale。
默认激活标签页
我们可以通过defaultTabIndex属性来设置默认激活哪个标签页。默认值是0。
<Tabs defaultTabIndex={1}>
<div title="Tab 1">
Tab 1 content
</div>
<div title="Tab 2">
Tab 2 content
</div>
</Tabs>总结
通过本文的教程，你已经学会了如何使用npm包react-tabs-container来创建一个强大的tabs组件。你可以自定义样式、添加点击事件、设置动画效果等。希望本文对你有所帮助！以下是示例代码：
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- ------------
------ ---- ---- -----------------------
------ --------------
----- --- ------- --------------- -
-------- -
------ -
-----
---------------------
-------------------
------------------- ------ -- ------------------ -------
-
---- ---------- ---
--- - -------
------
---- ---------- ---
--- - -------
------
---- ---------- ---
--- - -------
------
-------
--
-
-
-------------------- --- ---------------------------------来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600562dc81e8991b448e0488