{...}" 2. Passez "tabIndex" via le composant "tab-group-layout.js", 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"."/> {...}" 2. Passez "tabIndex" via le composant "tab-group-layout.js", 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".">

Maison  >  Article  >  interface Web  >  Comment utiliser React pour implémenter un composant onglet

Comment utiliser React pour implémenter un composant onglet

藏色散人
藏色散人original
2022-10-25 17:19:012245parcourir

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".

Comment utiliser React pour implémenter un composant onglet

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn