這篇“如何使用react實現(xiàn)一個tab組件”文章的知識點大部分人都不太理解，所以小編給大家總結了以下內容，內容詳細，步驟清晰，具有一定的借鑒價值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“如何使用react實現(xiàn)一個tab組件”文章吧。

創(chuàng)新互聯(lián)公司作為成都網(wǎng)站建設公司，專注重慶網(wǎng)站建設公司、網(wǎng)站設計，有關成都定制網(wǎng)站方案、改版、費用等問題，行業(yè)涉及隧道混凝土攪拌車等多個領域，已為上千家企業(yè)服務，得到了客戶的尊重與認可。

使用react實現(xiàn)一個tab組件的方法：1、通過“export default props => {...}”方式創(chuàng)建TAB button組件；2、通過“tab-group-layout.js”組件來傳“tabIndex”，并設置默認選中的tab效果；3、用react繼承“react.component”組件里的onMouseOver和OnMouseOut方法即可。

怎么使用react實現(xiàn)一個tab組件？

react寫Tab組件

使用react寫TAB欄組件和對應hover事件（背景：在用gatsby開發(fā)頁面時，遇到這樣的組件效果，順便記錄一下）

1、效果

默認選中的tab選中效果 和 鼠標放上去的hover效果

當鼠標滑過右側的tab時，也會有和第一個一樣的選中效果！

2、tab-button.js 組件

import React from "react"
import { css } from "@emotion/core"
import { Link } from "gatsby"
import jdyStyles from "./container.module.css"
 
// TAB button 組件
export default props => {
 
return (
 

 

{props.children}

 

 
)
}

3、tab-group-layout.js 組件

import React from "react"
import { css } from "@emotion/core"
import { Link } from "gatsby"
import ListLink from "../components/tab-button"
import RegisterButton from "../components/round-button"
export default ({ tabIndex }) => {
 
return (
 

  
{/* tab */}

產(chǎn)品介紹
成功案列
服務支持
資源中心

 

 
)
}

使用這個組件傳過來 tabIndex 設置默認選中的tab效果；也可以自己處理展示的邏輯

4、對應的css樣式 container.module.css

.header_hover{
  color: #333;
}
 
.header_hover_default{
  color: #0084ff!important;
  border-top: 3px solid #0084ff;
}
 
.header_hover:hover{
  color: #0084ff!important;
  border-top: 3px solid #0084ff;
}

5、當前組件的hover使用的是css樣式控制，也可以用 react繼承 react.component組件里的onMouseOver和OnMouseOut方法來實現(xiàn)。

以上就是關于“如何使用react實現(xiàn)一個tab組件”這篇文章的內容，相信大家都有了一定的了解，希望小編分享的內容對大家有幫助，若想了解更多相關的知識內容，請關注創(chuàng)新互聯(lián)行業(yè)資訊頻道。