30-seconds-of-react React 30 seconds of React 30 seconds of React 30 seconds of React 30 seconds of React 30 seconds of React

Series of articles:

  • React 30 seconds: Render array data into lists and tables
  • React 30 Seconds learning: Make input fields, password visibility, slider components, drop-down selectors, check box components
  • React 30 seconds: Create multi-line text components that limit the number of characters and words
  • React 30 seconds Speed learning: Implement collapsible, infinite hierarchy tree components
  • React 30 Seconds: Make text components that automatically recognize links
  • React 30 Seconds To Learn: Make accordion components
  • React 30 Seconds Learning: Create a multicast component
  • React 30 Seconds Quick Learning: Make folding panel components
  • React 30 Seconds: Create a countdown component
  • React 30 seconds Quick Learning: Create file drag and drop components
  • React 30 Seconds Speed Learning: Make modal box components
  • React 30 seconds learn: Create a star rating component – React 30 seconds learn: Create a TAB component

TAB component

  • To define aTabItemComponent to pass toTabAnd through theprops.childrenIdentify the name of the function in theTabItemExternal unnecessary nodes.
  • useReact.useState()The hooks will bebindIndexThe value of the state variable is initialized toprops.defaultIndex.
  • useArray.prototype.mapTo rendertab-menuandtab-view.
  • definechangeTabfortab-menuClick on the<button>When the execution.
  • This leads according to theirindexRerender in reversetab-viewitemstyleandclassNameAs well astab-menu 。
  • changeTabExecute the passed callback functiononTabClickAnd updatebindIndex, which will result in re-rendering according to theirindexchangetab-viewThe project andtab-menuButton on thestyle 和 className 。
.tab-menu > button {
  cursor: pointer;
  padding: 8px 16px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
}
.tab-menu > button.focus {
  border-bottom: 2px solid #007bef;
}
.tab-menu > button:hover {
  border-bottom: 2px solid #007bef;
}
Copy the code
import styles from "./Tabs.css";

function TabItem(props) {
  return<div {... props} />; } function Tabs(props) { const [bindIndex, setBindIndex] = React.useState(props.defaultIndex); const changeTab = newIndex => { if (typeof props.onTabClick === "function") props.onTabClick(newIndex); setBindIndex(newIndex); }; const items = props.children.filter(item => item.type.name === TabItem.name); return ( <div className={styles["wrapper"]}> <div className={styles["tab-menu"]}> {items.map(({ props: { index, label } }) => ( <button onClick={() => changeTab(index)} key={index} className={bindIndex === index ? styles["focus"] : ""} > {label} </button> ))} </div> <div className={styles["tab-view"]}> {items.map(({ props }) => ( <div {... props} className={styles["tab-view_item"]} key={props.index} style={{ display: bindIndex === props.index ? "block" : "none" }} /> ))} </div> </div> ); }Copy the code

example

export default function() {
  return (
    <Tabs defaultIndex="1" onTabClick={console.log}>
      <TabItem label="A" index="1">A The content of the elective card</TabItem>
      <TabItem label="B" index="2">B The contents of the optional card</TabItem>
    </Tabs>
  );
}
Copy the code
  • The sample code
  • Running effect