react 中tab 切换样式并停留

最新推荐文章于 2024-05-09 22:39:12 发布
最新推荐文章于 2024-05-09 22:39:12 发布
阅读量239 收藏
点赞数
文章标签： react.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46166755/article/details/120800963
版权

首先要自己模拟一个数据

 constructor(props) {
   
    super(props);
    const {
   getDetail} = props
    this.state = {
   
      isShow:1,
      list: [
        {
   
          img: 'https://cdn1.xunkyz.com/tocConsul/Cardioid/20210704134218538_572447.jpg',
          id: 1,
          value: props.getDetail.title,
          title: '精神' ,
          link: `/baike`,
        }, {
   
          img: 'https://cdn1.xunkyz.com/tocConsul
最低0.47元/天 解锁文章
38?
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
react样式切换
QSWの
11-14 1861
react代码: import React, { Component } from 'react'; import './App.css' class App extends Component { state = { menuNum: 1 } setMenuNum = (num) => { this.setState({ ...
React项目 页面切换，保留表单筛选项
赵乘风_i
04-29 3043
Q: 人员列表页面切换保留筛选项 ans: /** * 表单组件在挂载时，将组件的 fields 值赋给对应的交互组件 */ componentDidMount() { const { fields, pageIndex } = View; this.props.form.setFieldsValue(fields); this.getUser(pageIndex); ...
对state进行保留和重置
最新发布
weixin_73918953的博客
05-09 680
只要在相同位置渲染的是相同组件，react就会保留statestate 不会被保存在JSX标签里。它与你在树中放置该JSX的位置相关联你可以通过为一个子树指定一个不同的key来重置它的state不要嵌套组件的定义，否则你会意外地导致state被重置。
react点击tab样式切换（tab标签及样式切换）
ITzhongzi的博客
04-13 8834
react tab标签以及样式切换。 方法一： 原理： 利用state 中的变量值，控制menu列表平的样式切换 示例demo： import React from "react"; import "./App.css" export default class App extends React.Component{ state = { menuNum: 1 }...
react，antd的Tabs，切换闪动问题，动画效果从前一个tag到新点击tag反复滑动
nuanzhu的博客
03-26 5815
公司项目，用的antd+umi，所以UI库直接用的antd的。 其中，有一个页面的Tabs出现以上问题，排查过组件使用、修改过动画效果，都无用。 最后发现和tab本身没关系，不是各种引入冲突。 是因为每个tab页有好几个接口请求，每个都会触发render刷新，而tab切换时，active值因为存在state里，因此数据变化也会触发render加载，因此会出现多次render加载，也导致...
在react中使用less动态切换主题样式
weixin_44052136的博客
10-11 2807
前言：本篇文章我们将介绍 less 在线编译实现。如果觉得作者写的不错，希望得到您的点赞/收藏/支持，如果有不同意见，欢迎下方评论区留言。 一、安装less cnpm install less --save 二、配置目录文件 1.在 public 目录下新增 theme 文件夹。如下图： 2.在 theme 目录下新增 variables.less，并配置主题颜色变量。 @themeColor: #1890ff; 3.在 theme 目录下新增 index.less，并引入 variables.les
React实现类似淘宝tab居中切换效果的示例代码
10-15
主要介绍了React实现类似淘宝tab居中切换效果,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
React组件内事件传参实现tab切换的示例代码
08-27
本篇文章主要介绍了React组件内事件传参实现tab切换的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
react-native动态切换tab组件的方法
08-27
在APP中免不了要使用tab组件,有的是tab切换,也有的是tab分类切换.这篇文章主要介绍了react-native动态切换tab组件的方法，非常具有实用价值，需要的朋友可以参考下
React-Native 实现点击Tab标签切换Tab页面
07-29
React-Native tabbar 的简单使用
React中使用外部样式的3种方式(小结)
12-02
1、css-in-js是一种使用 js 编写 css 样式的 css 处理方案。它的实现方案有很多，比如styled-components、polished、glamorous(paypal 开源的，不再维护)、radium、emotion等等。 2、其中最成熟的便是styled-...
【Antd】Tabs组件切换tab栏时react hooks的useEffect不执行原因及解决
hzxOnlineOk的博客
10-08 1646
antd的Tab组件没有执行重新渲染，他只在每一个Tab第一次点击时生成，进行一次渲染，之后点击回去不再渲染子组件。
使用umi的keep Alive实现详情页面的回退,保留滚筒条高度
画龍丶的博客
07-15 1658
React集成react-activation，实现页面缓存记录react页面跳转是否要回到指定浏览位置解决方案antd-design-pro实现多页签，切换页签保留缓存，keep-aliveumiAntDesign使用umi-plugin-keep-alive实现KeepAlive状态存储使用umi的keepAlive实现详情编辑页面的回退,保留列表的查询条件。...
React 之 解决页面多次重复渲染造成页面卡顿问题
在路上`的博客
11-08 3139
解决局部刷新问题
umi+react开发中，使用history.push中的state传参，接收参数的页面在项目部署到服务器后，刷新页面参数丢失报错怎么办？
znhyXYG的博客
03-20 2092
umi+react开发中，使用history.push中的state传参，接收参数的页面在项目部署到服务器后，刷新页面参数丢失报错怎么办？
vue单页应用如何在页面刷新时保留state状态数据
weixin_30596735的博客
08-06 567
在Vue单页应用中，如果在某一个具体路由的具体页面下点击刷新，那么刷新后，页面的状态信息可能就会丢失掉。这时候应该怎么处理呢？如果你也有这个疑惑，这篇文章或许能够帮助到你 在 App.vue 的 created 钩子函数里写下如下代码： //在页面加载时读取localStorage里的状态信息 localStorage.getItem("userMsg") &am...
react 实现点击切换class（详细）
热门推荐
天下大师傅
02-08 1万+
点击切换样式， 通过for循环将索引(index)暂存至data-index中， 再通过onclick点击事件 e.target.parentNode.parentNode.getAttribute(‘data-index’); 来获取当前点击的索引值，最后将索引值存到state中。 页面三目运算通过比对state中暂存的索引值和当前dom元素的索引值的改变来决定是否显示class-st...
react中如何做成 tab 切换的效果
1363648943的专栏
08-20 5845
Antd Design 中有一个 tab 切换的组件，但是个人觉得不是所有情况都需要用到这个。组件中有个 Radio 的样式类似于这个 tab 的操作。   这是官方面组件给出的样子，不同于之前 radio 单选按钮圆圈式的。   现在我想做成三个 按钮式的，并且每个按钮分别对应不同的 tab。   步骤：       第一步：先把样式写好，组件引入    const Ra...
react+antd中的tab页组件修改选中的tab样式
weixin_36706903的博客
09-11 6670
原图 效果图 思路：tab有增删，我这里是根据目录显示tab标签有选中同一个的，其实tab本身的切换也算选中同一个， 1、删除某个的时候，activeKey变得同时，样式也要跟着变，不管是有顺序的删除还是无序的删除 2、新增的时候，我这里的数据结构是都在最后一个加新数据，如果不是选中同一个，都是默认显示新增的数据的tab标签，也可以放最前面 3、我这里是根据组件的className来判断的，获取到所有的标签document.getElementsByClassName('ant-t
react tab切换
02-27
React Tab切换是一种常见的UI组件，用于在React应用中实现多个选项卡之间的切换。它通常用于展示不同的内容或功能，并允许用户通过点击选项卡来切换显示的内容。 在React中，可以使用多种方式来实现Tab切换，其中一种常见的方式是使用条件渲染。以下是一个简单的示例： 1. 首先，需要创建一个Tab组件，用于渲染选项卡和对应的内容： ```jsx import React, { useState } from 'react'; const Tab = ({ tabs }) => { const [activeTab, setActiveTab] = useState(0); const handleTabClick = (index) => { setActiveTab(index); }; return ( <div> <div className="tab-header"> {tabs.map((tab, index) => ( <div key={index} className={`tab-item ${activeTab === index ? 'active' : ''}`} onClick={() => handleTabClick(index)} > {tab.title} </div> ))} </div> <div className="tab-content"> {tabs[activeTab].content} </div> </div> ); }; export default Tab; ``` 2. 然后，在父组件中使用Tab组件，并传入选项卡的数据： ```jsx import React from 'react'; import Tab from './Tab'; const App = () => { const tabs = [ { title: 'Tab 1', content: 'Content for Tab 1', }, { title: 'Tab 2', content: 'Content for Tab 2', }, { title: 'Tab 3', content: 'Content for Tab 3', }, ]; return ( <div> <h1>React Tab切换示例</h1> <Tab tabs={tabs} /> </div> ); }; export default App; ``` 在上述示例中，Tab组件接受一个tabs数组作为props，每个数组元素包含一个title和content字段，分别表示选项卡的标题和内容。通过useState钩子来管理当前选中的选项卡索引，通过点击选项卡来更新activeTab的值，从而实现切换显示不同的内容。 以上是一个简单的React Tab切换的实现方式，你可以根据实际需求进行扩展和定制。如果你有其他相关问题，请继续提问。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

38?

感觉写的有帮助可以多多关注

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值