Cara menggunakan react untuk melaksanakan komponen tab

Cara menggunakan react untuk melaksanakan komponen tab: 1. Buat komponen butang TAB melalui "export default props => {...}" 2. Melalui "tab-group-layout.js"; komponen Lulus "tabIndex" dan tetapkan kesan tab pilihan lalai; 3. Gunakan react untuk mewarisi kaedah onMouseOver dan OnMouseOut dalam komponen "react.component".

Persekitaran pengendalian tutorial ini: Sistem Windows 7, bertindak balas versi 18.0.0, komputer Dell G3.

Bagaimana untuk menggunakan reaksi untuk melaksanakan komponen tab?

Bertindak balas untuk menulis komponen Tab

Gunakan tindak balas untuk menulis komponen lajur TAB dan acara tuding yang sepadan (Latar Belakang: Apabila membangunkan halaman dengan gatsby, Saya menghadapi Kesan komponen seperti itu, rakamkannya dengan cara)

1. Kesan

Kesan pemilihan tab lalai dan kesan hover apabila tetikus diletakkan padanya

Apabila tetikus meluncur ke atas Apabila mengklik tab di sebelah kanan, ia akan mempunyai kesan pemilihan yang sama seperti yang pertama!

2. komponen 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. Komponen tersebut melepasi tabIndex untuk menetapkan kesan tab yang dipilih secara lalai; anda juga boleh mengendalikan sendiri logik paparan

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

4 bekas gaya css.modul.css

5 kawalan gaya CSS komponen semasa digunakan, dan anda juga boleh menggunakan react untuk mewarisi kaedah onMouseOver dan OnMouseOut dalam komponen react.component untuk mencapai

Pembelajaran yang disyorkan: "

tutorial video reaksi

.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;
}

"

Atas ialah kandungan terperinci Cara menggunakan react untuk melaksanakan komponen tab. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!