实战用干货分享用react实现一个tab组件（reacttab组件）

应用react实现一个tab组件的方法：一、通过“exportdefaultprops=>{...}”形式建立TABbutton组件；二、通过“tab-group-layout.js”组件来传“tabIndex”，并配置默认选中的tab效果；三、用react连续“react.component”组件里的onMouseOver以及OnMouseOut方法就可。

怎么应用react实现一个tab组件？

react写Tab组件

应用react写TAB栏组件以及对于应hover事件（配景：在用gatsby开辟页面时，遇到如许的组件效果，特地记载一下）

一、效果

默认选中的tab选中效果以及鼠标放下来的hover效果

当鼠标滑过右边的tab时，也会有以及第一个同样的选中效果！

二、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}
)}

三、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 */}
产物介绍胜利案列效劳反对于资本核心
)}

应用这个组件传过去tabIndex配置默认选中的tab效果；也能够自身解决展现的逻辑

四、对于应的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;}

五、以后组件的hover应用的是css样式管制，也能够用react连续react.component组件里的onMouseOver以及OnMouseOut方法来实现

本文链接：https://addon.ciliseo.com/shi-zhan-yong-gan-huo-fen-xiang-yong-react-shi-xian-yi-ge-tab-zu-jian.html