Comment utiliser React pour implémenter un composant onglet

Comment utiliser React pour implémenter un composant onglet : 1. Créez le composant bouton TAB via "export default props => {...}" 2. Passez "tabIndex" via "tab-group-layout.js" ; composant " et définissez l'effet d'onglet sélectionné par défaut ; 3. Utilisez React pour hériter des méthodes onMouseOver et OnMouseOut dans le composant "react.component".

L'environnement d'exploitation de ce tutoriel : système Windows7, version React18.0.0, ordinateur Dell G3.

Comment utiliser React pour implémenter un composant onglet ?

Réagissez pour écrire le composant Tab

Utilisez React pour écrire le composant de colonne TAB et l'événement de survol correspondant (Contexte : lors du développement de la page avec Gatsby, j'ai rencontré un tel effet de composant et je l'ai d'ailleurs enregistré)

1. Effet

Par défaut L'effet de sélection de l'onglet sélectionné et l'effet de survol lorsque la souris est placée dessus

​​​​​​​

​​Lorsque la souris glisse sur l'onglet de droite , il y aura le même effet de sélection que le premier !

2. composant 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 (
 
<li css={css`font-size: 18px;margin-left:18px;margin-right: 18px;display:flex;flex-direction: column;align-items:center;justify-content:center`} >
 
<Link css={css`font-size: 18px;padding: 20px 12px;`} 
className={ (props.selected?jdyStyles.header_hover_default:jdyStyles.header_hover)  }  to={props.to}>
{props.children}
</Link>
 
</li>
 
)
}

3. composant 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 (
 
<div>
  
{/* tab */}
<ul style={{ listStyle: `none`, float: `right` }} css={css`display: flex;justify-content: space-between;align-items: center;`}>
<ListLink to="/official-site/" selected={(tabIndex===&#39;official-site&#39;)}>产品介绍</ListLink>
<ListLink to="/about/" selected={(tabIndex===&#39;about&#39;)}>成功案列</ListLink>
<ListLink to="/contact/" selected={(tabIndex===&#39;contact&#39;)}>服务支持</ListLink>
<ListLink to="/sweet-pandas-eating-sweets/" selected={(tabIndex===&#39;sweet-pandas-eating-sweets&#39;)}>资源中心</ListLink>
</ul>
 
</div>
 
)
}

Utilisez ce composant pour transmettre l'onglet tabIndex afin de définir l'effet d'onglet sélectionné par défaut ; yourself

4. Le style CSS correspondant containers.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. Le survol du composant actuel utilise le contrôle de style CSS Vous pouvez également utiliser React pour hériter des méthodes onMouseOver et OnMouseOut dans le composant React.component. apprentissage : "

tutoriel vidéo React

》

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!