So verwenden Sie React, um eine Tab-Komponente zu implementieren

So verwenden Sie React, um eine Tab-Komponente zu implementieren: 1. Erstellen Sie die TAB-Button-Komponente über „export default props => {...}“ 2. Übergeben Sie „tabIndex“ über „tab-group-layout.js“; Komponente " und legen Sie den standardmäßigen ausgewählten Tab-Effekt fest; 3. Verwenden Sie React, um die Methoden onMouseOver und OnMouseOut in der Komponente „react.component" zu erben.

Die Betriebsumgebung dieses Tutorials: Windows7-System, React18.0.0-Version, Dell G3-Computer.

Wie verwende ich React, um eine Tab-Komponente zu implementieren?

Reagieren Sie, um die Tab-Komponente zu schreiben.

Verwenden Sie Reagieren, um die TAB-Spaltenkomponente und das entsprechende Hover-Ereignis zu schreiben. (Hintergrund: Bei der Entwicklung der Seite mit Gatsby bin ich auf einen solchen Komponenteneffekt gestoßen und habe ihn übrigens aufgezeichnet.)

1. Effekt

Standard Der Auswahleffekt der ausgewählten Registerkarte und der Hover-Effekt, wenn die Maus darauf platziert wird

​​​​​​​

​​Wenn die Maus über die Registerkarte rechts gleitet , es wird den gleichen Auswahleffekt wie beim ersten geben!

2. tab-button.js-Komponente

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. tab-group-layout.js-Komponente

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>
 
)
}

Verwenden Sie diese Komponente, um den tabIndex zu übergeben, um den standardmäßigen ausgewählten Tab-Effekt festzulegen sich selbst

4. Der entsprechende CSS-Stil „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. Der Hover der aktuellen Komponente kann auch die Methoden „onMouseOver“ und „OnMouseOut“ in der Komponente „react.component“ erben Lernen: „

Video-Tutorial reagieren

》

Das obige ist der detaillierte Inhalt vonSo verwenden Sie React, um eine Tab-Komponente zu implementieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!