antd Tabs组件自定义头部

最新推荐文章于 2024-03-20 15:37:00 发布

原创最新推荐文章于 2024-03-20 15:37:00 发布 · 7.4k 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#javascript #react.js #前端

react 同时被 2 个专栏收录

6 篇文章

订阅专栏

antd

2 篇文章

订阅专栏

本文介绍了如何在antd的Tabs组件中使用renderTabBar方法来自定义TabBar。示例代码展示了解决方案，需要注意activeKey必须为字符串，不能使用数字。

该文章已生成可运行项目，

antd的Tabs组件，用renderTabBar自定义TabBar。

直接上代码：

import React, { Fragment, useEffect, useState, useRef } from 'react'
import styles from './style.module.scss'
import classNames from 'classnames/bind'
import { Tabs, Collapse } from 'antd';

const { TabPane } = Tabs;

const Demo = props => {
  const cx = classNames.bind(styles); //引用样式，写自己的样式即可
  const [activeKey, setActiveKey] = useState('0') //用于控制显示哪个TabPane
  const [infos, setInfos] = useState([])

  useEffect(() => {
    setInfos([
      {key: "0", title: "#201"},
      {key: "1", title: "#202"},
      {key: "2", title: "#203"},
      {key: "3", title: "#204"},
      {key: "4", title: "#205"},
      {key: "5", title: "#206"}
    ])
  },[])

  const renderTabBar = () => {
    return(
      // TabBar的样式自己写
      <div className={cx("table-tabbar-root")}>
        {infos ? infos.map((item, index) => {
          //选中tab的样式
          let className = item.key === activeKey ? "active" : ""
          return(
            <div className={cx(className)} key={item.key} onClick={() => setActiveKey(item.key)}>
              {item.title}
            </div>
          )
        })
        :null}
      </div>
    )
  }

  return (
    <div className={cx("root")}>
      <Tabs 
        activeKey={activeKey}
        tabPosition={"top"}
        animated={true}
        renderTabBar={() => renderTabBar()}
      >
        <TabPane tab="Tab 0" key="0">
          Content of Tab 0
        </TabPane>
        <TabPane tab="Tab 1" key="1">
          Content of Tab 1
        </TabPane>
        <TabPane tab="Tab 2" key="2">
          Content of Tab 2
        </TabPane>
        <TabPane tab="Tab 3" key="3">
          Content of Tab 3
        </TabPane>
        <TabPane tab="Tab 4" key="4">
          Content of Tab 4
        </TabPane>
        <TabPane tab="Tab 5" key="5">
          Content of Tab 5
        </TabPane>
      </Tabs>
    </div>
  )
}

export default Demo

注：

1. activeKey需要是字符串，尝试用数字，结果失败。

本文章已经生成可运行项目