How to use react to implement a tab component

How to use react to implement a tab component: 1. Create a TAB button component through "export default props => {...}"; 2. Through the "tab-group-layout.js" component Pass "tabIndex" and set the default selected tab effect; 3. Use react to inherit the onMouseOver and OnMouseOut methods in the "react.component" component.

The operating environment of this tutorial: windows7 system, react18.0.0 version, Dell G3 computer.

How to use react to implement a tab component?

React to write the Tab component

Use react to write the TAB column component and the corresponding hover event (Background: When developing the page with gatsby, I encountered such a component Effect, record it by the way)

1. Effect

The default tab selection effect and the hover effect when the mouse is placed on it

When the mouse slides over When clicking the tab on the right, it will have the same selection effect as the first one!

2. tab-button.js component

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 component

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

Use this component to pass tabIndex Set the default selected tab effect; you can also handle the display logic yourself

4. Corresponding css style 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. The hover of the current component uses css style control , you can also use react to inherit the onMouseOver and OnMouseOut methods in the react.component component to achieve

Recommended learning: "react video tutorial"

The above is the detailed content of How to use react to implement a tab component. For more information, please follow other related articles on the PHP Chinese website!