react使用hook封装一个tab组件
目录
- react使用hook封装一个tab组件
- Tabbar.jsx
- 使用组件
- 效果
react使用hook封装一个tab组件
Tabbar.jsx
import PropsTypes from "prop-types";
import React, { useEffect, useState } from 'react';
export default function Tabbar(props) {const { tabData , current } = propsconst [currentTab,setCurrentTab] = useState('test')const tabchange = (item) => {setCurrentTab(item.key)}useEffect(()=>{setCurrentTab(current)},[current])return (<div style={{display: 'flex',justifyContent: 'space-around',alignItems: 'center'}}>{tabData.map(item=>{return (<divstyle={{flex:'1',textAlign:'center',marginRight:'5px',cursor:'pointer',color: item.key === currentTab ? 'red' : '#000',background: item.key === currentTab ? '#ccc' : '#eee',}}key={item.key}onClick={ () => tabchange(item) }>{ item.name }</div>)})}</div>)
}Tabbar.propTypes = {current: PropsTypes.oneOfType([PropsTypes.string, PropsTypes.number]),tabData: PropsTypes.array.isRequired
};
Tabbar.defaultProps = {tabData: [{name:'测试1',key:'test1'},{name:'测试2',key:'test2'},],current:''
};
使用组件
import React from 'react';
import Tabbar from "../tabbar/Tabbar";
export default function App(props) {const tabData = [{name:'篮球',key:'1'},{name:'足球',key:'2'},{name:'排球',key:'3'}]const current = '2'return (<div className='content'><Tabbar tabData={tabData} current={current} ></Tabbar><div style={{marginBottom: '10px'}}></div><Tabbar></Tabbar></div>)
}
效果

相关文章:
react使用hook封装一个tab组件
目录 react使用hook封装一个tab组件Tabbar.jsx使用组件效果 react使用hook封装一个tab组件 Tabbar.jsx import PropsTypes from "prop-types"; import React, { useEffect, useState } from react; export default function Tabbar(props) {const { tabData , cur…...
java详细安装教程(供参考)一一java(jdk)安装
一、java历史简介 1991 年Sun公司的James Gosling等人开始开发名称为 Oak (橡树)的语言。希望用于控制嵌入在有线电视交换盒、PDA等的微处理器, 1994年将Oak语言更名为Java 1998年JDK1.2时,更名为Java 2 Platform 分为标准版J…...
C++函数内联详解
本文旨在讲解C中的函数内联相关知识,读完这篇文章,希望读者们会对函数内联有更深一步的认识! 内联函数的定义 在计算机科学中, 内联函数 (有时称作 在线函数 或 编译时期展开函数 )是一种编程语言结构&…...
Revit SDK 介绍:NewForm 新建体量
前言 这个例子介绍如何新建体量。 内容 图形生成效果。 用 Extrusion 创建体量 // 创建一个轮廓 ReferenceArray ref_ar new ReferenceArray(); // 创建三条直线,并放入轮廓 Autodesk.Revit.DB.XYZ ptA new Autodesk.Revit.DB.XYZ(10, 10, 0); Autodesk.Rev…...
Ubuntu离线或在线安装Python解释器
这里以安装Python3.5.7为例。 首先进入官网,下载Python-3.5.7.tgz,或者使用以下命令下载(需要联网): wget https://www.python.org/ftp/python/3.5.7/Python-3.5.7.tgz下载完成后,使用以下命令进行解压缩…...
微信小程序隐私协议相关接口实际使用方式
<view wx:if"{{showPrivacy}}" class"privacy"><view class"popup"><view>隐私弹窗内容....</view><view bindtap"openPrivacyAgreement">点击查看隐私协议</view><button id"disagreeBt…...
MySQL--MySQL表的增删改查(进阶)
check 聚合查找 count sum average max min 我们这里先构造出多张表 查询lisi同学的成绩 来自student和来自score c 增加名字这一条件 查询所有同学的总成绩以及个人信息 来自score和来自student 查询所有同学的各科成绩以及个人信息 来自student,course和…...
Golang 中的静态类型和动态类型
定义说明 静态类型(static type):在编码时就能确定的类型,通过变量定义可以确定的类型;动态类型(concrete type):在运行时才能确定具体的数据类型; 动态静态类型如何理…...
docker的数据卷、docker数据持久化
目录 前言docker数据持久化的2种方式数据卷 bind mount ,即-v参数匿名数据卷 docker manager volume-v参数和匿名卷的区别docker volume 命令的使用数据卷容器孤儿volume总结 前言 环境:centos7.9 docker version 20.10.14 本篇我们来介绍docker的数据卷…...
阅读源码工具Sourcetrail
收费工具Source Insight、Understand Sourcetrail开源工具 一、下载安装 接下来就是download,在GitHub的release页面选择自己系统对应的发布版本下载安装: 安装好后,运行程序,会出现这样的界面: 二、应用 选择“New…...
KMP 算法详解
KMP算法详解 1 KMP算法解决的问题 2 前缀问题 3 KMP 算法 1 KMP算法解决的问题 字符串str1和str2,str1是否包含str2,如果包含返回str2在str1中开始的位置。并做到时间复杂度为 O ( n ) O(n) O(n) 2 前缀问题 求一个字符串中每个字符前缀和后缀相…...
[matconvnet]matconvnet-1.0-beta-25在cuda11.1以上编译问题总结
首先可以肯定是matconvnet-1.0-beta-25不支持cuda11.1及其以上版本,因为cudnn版本问题导致源码api接口不一样,会下面类似报错 E:\Matlab\R2020a\matconvnet-1.0-beta25\matlab\src\bits\datacu.hpp(89): error: identifier "cudnnConvolutionFwdPr…...
自动化驱动程序管理
在部署操作系统时,每次都从下载和分发所需的驱动程序中实现真正的独立性可能是一场艰苦的战斗。特别是具有硬件多样化的环境,并且需要支持新的硬件类型时。借助 OS Deployer,可以对所有端点使用一个映像,无论品牌和型号如何&#…...
智能合约编写高级篇(二)区块哈希介绍
本文档从区块哈希基本概念出发,详细介绍了中移链的区块哈希交易接口和应用方向。适用于EOS区块链智能合约高级开发人员,熟悉如何获取当前发生交易所在的区块号和区块哈希前缀,并通过Tapos机制验证交易的有效性。 01 概述 (一&…...
二进制链表转整数
给你一个单链表的引用结点 head。链表中每个结点的值不是 0 就是 1。已知此链表是一个整数数字的二进制表示形式。 请你返回该链表所表示数字的 十进制值 。 示例 1: 输入:head [1,0,1] 输出:5 解释:二进制数 (101) 转化为十进…...
Python爬虫进阶:使用Scrapy库进行数据提取和处理
在我们的初级教程中,我们介绍了如何使用Scrapy创建和运行一个简单的爬虫。在这篇文章中,我们将深入了解Scrapy的强大功能,学习如何使用Scrapy提取和处理数据。 一、数据提取:Selectors和Item 在Scrapy中,提取数据主要…...
五)Stable Diffussion使用教程:文生图之高清修复
上一篇我们说到图生图,这一篇来说说高清修复。 上一篇我们通过一个例子实现了图生图的功能,使用一张图片生成了另一种风格的图片。 然而,我们生成的图片质量不尽如人意。 虽然我们之前也提到设置分辨率、精炼提示词去提升画面质量等等,但是实际用下来发现,分辨率拉得太…...
SQL SERVER 如何实现UNDO REDO 和PostgreSQL 有近亲关系吗
开头还是介绍一下群,如果感兴趣PolarDB ,MongoDB ,MySQL ,PostgreSQL ,SQL Server,Redis ,Oracle ,Oceanbase 等有问题,有需求都可以加群群内有各大数据库行业大咖,CTO,可以解决你的问题。加群请加微信号 l…...
SpringBoot原理-自动配置-原理分析-源码跟踪
自动配置原理 SpringBootApplication 该注解标识在SpringBoot项目的启动类上,是SpringBoot中最为重要的注解,该注解由三个部分组成。 SpringBootConfiguration:该注解与Configuration注解作用一样,用来声明当前类为一个配置类Comp…...
安全基础 --- 原型链污染
原型链 大部分面向对象的编程语言,都是通过“类”(class)实现对象的继承。传统上,JavaScript 语言的继承不通过 class,而是通过“原型对象”(prototype)实现 1、prototype 属性的作用 JavaScri…...
未来机器人的大脑:如何用神经网络模拟器实现更智能的决策?
编辑:陈萍萍的公主一点人工一点智能 未来机器人的大脑:如何用神经网络模拟器实现更智能的决策?RWM通过双自回归机制有效解决了复合误差、部分可观测性和随机动力学等关键挑战,在不依赖领域特定归纳偏见的条件下实现了卓越的预测准…...
C++:std::is_convertible
C++标志库中提供is_convertible,可以测试一种类型是否可以转换为另一只类型: template <class From, class To> struct is_convertible; 使用举例: #include <iostream> #include <string>using namespace std;struct A { }; struct B : A { };int main…...
从WWDC看苹果产品发展的规律
WWDC 是苹果公司一年一度面向全球开发者的盛会,其主题演讲展现了苹果在产品设计、技术路线、用户体验和生态系统构建上的核心理念与演进脉络。我们借助 ChatGPT Deep Research 工具,对过去十年 WWDC 主题演讲内容进行了系统化分析,形成了这份…...
vue3 字体颜色设置的多种方式
在Vue 3中设置字体颜色可以通过多种方式实现,这取决于你是想在组件内部直接设置,还是在CSS/SCSS/LESS等样式文件中定义。以下是几种常见的方法: 1. 内联样式 你可以直接在模板中使用style绑定来设置字体颜色。 <template><div :s…...
unix/linux,sudo,其发展历程详细时间线、由来、历史背景
sudo 的诞生和演化,本身就是一部 Unix/Linux 系统管理哲学变迁的微缩史。来,让我们拨开时间的迷雾,一同探寻 sudo 那波澜壮阔(也颇为实用主义)的发展历程。 历史背景:su的时代与困境 ( 20 世纪 70 年代 - 80 年代初) 在 sudo 出现之前,Unix 系统管理员和需要特权操作的…...
AspectJ 在 Android 中的完整使用指南
一、环境配置(Gradle 7.0 适配) 1. 项目级 build.gradle // 注意:沪江插件已停更,推荐官方兼容方案 buildscript {dependencies {classpath org.aspectj:aspectjtools:1.9.9.1 // AspectJ 工具} } 2. 模块级 build.gradle plu…...
Web 架构之 CDN 加速原理与落地实践
文章目录 一、思维导图二、正文内容(一)CDN 基础概念1. 定义2. 组成部分 (二)CDN 加速原理1. 请求路由2. 内容缓存3. 内容更新 (三)CDN 落地实践1. 选择 CDN 服务商2. 配置 CDN3. 集成到 Web 架构 …...
Python基于历史模拟方法实现投资组合风险管理的VaR与ES模型项目实战
说明:这是一个机器学习实战项目(附带数据代码文档),如需数据代码文档可以直接到文章最后关注获取。 1.项目背景 在金融市场日益复杂和波动加剧的背景下,风险管理成为金融机构和个人投资者关注的核心议题之一。VaR&…...
LOOI机器人的技术实现解析:从手势识别到边缘检测
LOOI机器人作为一款创新的AI硬件产品,通过将智能手机转变为具有情感交互能力的桌面机器人,展示了前沿AI技术与传统硬件设计的完美结合。作为AI与玩具领域的专家,我将全面解析LOOI的技术实现架构,特别是其手势识别、物体识别和环境…...
论文阅读:LLM4Drive: A Survey of Large Language Models for Autonomous Driving
地址:LLM4Drive: A Survey of Large Language Models for Autonomous Driving 摘要翻译 自动驾驶技术作为推动交通和城市出行变革的催化剂,正从基于规则的系统向数据驱动策略转变。传统的模块化系统受限于级联模块间的累积误差和缺乏灵活性的预设规则。…...
