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

此处内容已经被作者隐藏，请输入验证码查看内容

验证码：

请关注本站微信公众号，回复“验证码”，获取验证码。在微信里搜索“钞能力。你在哪？”或者“mdyc919293”或者微信扫描右侧二维码关注公众号。

使用react实现一个tab组件的方法：1、通过“export default props => {...}”方式创建TAB button组件；2、通过“tab-group-layout.js”组件来传“tabIndex”，并设置默认选中的tab效果；3、用react继承“react.component”组件里的onMouseOver和OnMouseOut方法即可。

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

react写Tab组件

使用react写TAB栏组件和对应hover事件（背景：在用gatsby开发页面时，遇到这样的组件效果，顺便记录一下）

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 */}
产品介绍成功案列服务支持资源中心
    )}

使用这个组件传过来 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方法来实现

你可能想看：

实战讲解php怎么实现一个用户签到功能

一淘模板发现随着互联网的发展，越来越多的网站都会提供用户签到功能，以增加用户参与度、留存率和粘性等。本文将介绍利用 PHP 实现用户签到的方法。 一、 前置条件 在实现用户签到前，我们需要进行如下准备...

价值298元迪恩资讯媒体/课程干货分享模板商业版 博客门户网站discuz模板源码

模板介绍 带完整首页、论坛、门户等各种板块的diy精美模块。 1.版本支持：discuzx3.0版本，discuzx3.1版本，discuzx3.2，discuzx3.3版本。 2.模板论坛首页...

GTA5mod整合版 真实画质 两千多载具 五百多位人物 超级英雄 罪恶都市 整合版【127GB】

此处内容已经被作者隐藏，请输入验证码查看内容

验证码：

请关注本站微信公众号，回复“验证码”，获取验证码。在微信里搜索“钞能力。你在哪？”或者“mdyc919293”或者微信扫描右侧二维码关注公众号。

...

PHP+Redis解决订单限流的实际问题，如何用Redis给订单限流

PHP+Redis解决订单限流的实际问题，如何用Redis给订单限流，如每M秒允许N个访问。 解决方案：

详解Laravel中如何使用Redis分布式锁+代码实例

一淘模板给大家介绍关于在laravel中如何使用Redis分布式锁的（原子锁 lock block release），希望对需要的朋友有所帮助！ 创建锁 use IlluminateSuppor...

WordPress新主题Tint Pro(Tinection重构版)无域名限制主题[更新至2.0.6]

Tint Pro是一款新主题，很多应该都用过知言的Tinection主题，时隔一段时间知言大神最近又更新重构了此主题起名为Tint Pro主题，全新构建与众不同。已经全文件解密，无域名限制。 主要结构...

React心理健康测试网站源码，帮助需要的人更好地了解自己的心理健康状态

React心理健康测试网站源码，帮助需要的人更好地了解自己的心理健康状态和人格特征。本模板提供了一个最小的配置，使得React可以在Vite中启用HMR，并且包含了几个ESLint规则。只需要使用re...

LightPicture一套轻量级企业团队图片资源管理系统、图床源码

LightPicture一套轻量级企业团队图片资源管理系统、图床源码 功能说明 支持第三方云储存，本地、阿里云 OSS、腾讯云 COS、七牛云 支持多桶储存，可同时添加多个对象存储桶管理 多图...