반응을 사용하여 탭 구성 요소를 구현하는 방법: 1. "기본 소품 내보내기 => {...}"를 통해 TAB 버튼 구성 요소를 생성합니다. 2. "tab-group-layout.js"를 통해 "tabIndex"를 전달합니다. 3. React를 사용하여 "react.comComponent" 구성 요소에서 onMouseOver 및 OnMouseOut 메서드를 상속합니다.
이 튜토리얼의 운영 환경: windows7 시스템, React18.0.0 버전, Dell G3 컴퓨터.
반응을 사용하여 탭 구성 요소를 구현하는 방법은 무엇입니까?
React를 사용하여 Tab 컴포넌트 작성
React를 사용하여 TAB 열 컴포넌트 및 해당 hover 이벤트 작성 (배경: gatsby로 페이지 개발할 때 이런 컴포넌트 효과를 접하고 기록해 두었습니다.)
1. 효과
기본 선택된 TAB 선택 효과와 마우스 호버 효과는 마우스가 오른쪽 탭을 지나갈 때도 첫 번째와 동일한 선택 효과가 나타납니다!
2. 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. 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==='official-site')}>产品介绍</ListLink> <ListLink to="/about/" selected={(tabIndex==='about')}>成功案列</ListLink> <ListLink to="/contact/" selected={(tabIndex==='contact')}>服务支持</ListLink> <ListLink to="/sweet-pandas-eating-sweets/" selected={(tabIndex==='sweet-pandas-eating-sweets')}>资源中心</ListLink> </ul> </div> ) }
이 구성 요소를 사용하여 tabIndex를 전달하면 기본 선택 탭 효과를 직접 설정할 수도 있습니다.
4. 해당 CSS 스타일 컨테이너.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. 현재 구성 요소의 마우스 오버는 CSS 스타일 컨트롤을 사용하여 이를 달성하기 위해 반응 구성 요소의 onMouseOver 및 OnMouseOut 메서드를 사용할 수도 있습니다.
추천 학습: "
react 비디오 튜토리얼》
위 내용은 반응을 사용하여 탭 구성 요소를 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!