background

• useantd UIThe Tabs component of the framework needs to modify the native style again according to the design diagram, and the steps are tedious.
• TabsLabel. You need to configure it againTabPaneTags and content per page, at least a dozen lines to complete.

/ / use antd
<Tabs defaultActiveKey="1" onChange={callback}>
    <TabPane tab="City Profile" key="1">
        <Outline />
    </TabPane>
    <TabPane tab="Urban History" key="2">
        <History />
    </TabPane>
    <TabPane tab="Geographical location" key="3">
        <Geo />
    </TabPane>
</Tabs>
Copy the code

React Hook is used to encapsulate all tab-related operations, leaving only a tabSet configuration interface. The Tab component is displayed on the page with a single line of code.

Use the following

<Tab tabSet={tabSet} />
Copy the code

TabSet is in the following format

const tabSet = {
  'City Profile': <Outline />.'City History': <History />.'Geographical location': <Geo />,}Copy the code

The attribute name of tabSet is the label name of TAB. Values are the contents of each TAB page to be displayed, imported as components.

Tab component implementation

The complete code

function Tab(props) {
  const { tabSet } = props 
  const arr = Object.keys(tabSet) // An array of TAB names
  const [selected, setSelected] = useState(arr[0]) // The currently selected TAB
  
  function select(item) {
    setSelected(item)
  }
  return (
        <div>
            <div className={styles.selectWrapper}>
                {arr.map(item => (
                    <div
                        key={item}
                        className={item= = =selected ? styles.selectItem_active : styles.selectItem_basic}
                        onClick={()= > select(item)}
                    >
                        {item}
                    </div>
                ))}
            </div>{tabSet[selected]} // Displays the content of the current TAB</div>)}Copy the code

Function components use useState Hook, through the selected variable to store the selected tag name; Styles are flexible and self-configurable.

style

Note the simple configuration, using the syntax less

.selectWrapper{
    display: flex;
    height: 50px;
    background: #F4F5F7;
    font-size: 16px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    div{
        height: 100%;
        padding: 0 40px;
        line-height: 50px;
        cursor: pointer; }}.selectItem_active{
    color: #FFFFFF;
    background: #2D8CF6;
}
Copy the code

rendering

Extension: write Tab only

scenario

Multiple tabs share the same component, or the TAB name is passed from the back end.

use

<SingleSelectTitle onChange={getSelect} arr={arr} selectedItem={selectedItem} />
Copy the code

component

const arr = ['City Profile'.'City History'.'Geographical location']

const [selectedItem, setSelectedItem] = useState(null)

function SingleSelectTitle(props) {
    const { onChange, arr, selectedItem} = props
    
    function select(item) {
        onChange(item)
    }
    return (
        <div className={styles.singleSelectWrapper}>
            {Array.isArray(arr) && arr.map(item => (
                <div
                    className={item= = =selectedItem ? styles.singleSelectItem_active : styles.singleSelectItem}
                    onClick={()= > select(item)}>{item}
                </div>))}</div>)}function getSelect(item) {
    setSelectedItem(item)
}
Copy the code