React自定義tab組合組件的實例詳解

更新時間：2026年02月02日 10:08:48 作者：妙團團

本文介紹了如何利用React的cloneElementAPI實現(xiàn)自定義Tab組合組件,通過將TabItem作為Tab的子組件,使用React.cloneElement方法傳遞props和事件處理函數(shù),實現(xiàn)了父子組件狀態(tài)聯(lián)動,本文結合實例代碼介紹的非常詳細,感興趣的朋友一起看看吧

前言

以前工作中一直使用的vue開發(fā)，最近開始寫react的項目，發(fā)現(xiàn)好多基礎都不會，導致在項目開發(fā)中踩坑。這個系列我打算，從學習中實踐，直到最后完全掌握react。

自定義Tab

我們平時用的React庫，Tab組件和子組件都是組合使用的，像element的React庫，Tabs.Item是套在Tabs組件里面的，在React的寫法里面，組件是作為children傳遞到父組件里面的。像這種組合的寫，父組件怎么拿到子組件的狀態(tài)，從而產(chǎn)生聯(lián)動。

既然能夠拿到children，那么通過children就可以監(jiān)聽到子組件的狀態(tài)變化了。這里要用到一個React的核心api，cloneElement。這個api克隆的是組件，不是元素。

const newElement = React.cloneElement(
  element,        // 要克隆的目標元素（必須是合法的 React 元素，比如 <TabItem />）
  [props],        // 可選：要新增/覆蓋的 props（會和原元素 props 合并）
  [...children]   // 可選：要替換的子元素（不傳則保留原元素的子元素）
);

實現(xiàn)代碼

通過cloneElement這個方法我們可以對組件進行處理，從而監(jiān)聽子組件的狀態(tài)，實現(xiàn)聯(lián)動。以下是完整代碼。

import React, { useState, useCallback } from 'react';
import './custom-test-tab.css';
export const TabItem = ({ 
  children, 
  label = '', 
  value, 
  onHandleClick,
  onClick = () => { }, 
  active = false 
}) => {
  const renderClass = () => {
    return `tab-item ${active ? 'active' : ''}`;
  }
  const handleClick = (e) => {
    onHandleClick && onHandleClick(value, e); 
    onClick(e);
  };
  return (
    <div className={renderClass()} onClick={handleClick}>
      { label || children }
    </div>
  );
};
export const Tab = function ({ children, active = '', onChange = () => { } }) {
  const [activeTab, setActiveTab] = useState(active);
  // 2. 修復handleClick參數(shù)邏輯 + 補充依賴數(shù)組
  const handleClick = useCallback((value) => {
    if (value === undefined) return; // 防止空值
    setActiveTab(value);
    onChange(value);
  }, [onChange]); // 依賴數(shù)組補充onChange，避免閉包問題
  const createdTabs = () => {
    return React.Children.map(children, (child) => {
      // 安全校驗：只處理TabItem類型的子組件
      if (!React.isValidElement(child) || child.type !== TabItem) {
        return child;
      }
      return React.cloneElement(child, {
        onHandleClick: handleClick, // 直接傳遞函數(shù)，無需包裝
        active: activeTab === child.props.value,
      });
    });
  };
  return (
    <div className={'custom-test-tab'}>
      {createdTabs()}
    </div>/
  );
};
// 3. 確保Tab.Item正確掛載
Tab.Item = TabItem;
export default Tab;

使用自定義的Tab

import { useState} from "react";
import { Tab, TabItem } from "../components/custom-test-tab";
export const TestTab = () => {
  const [active, setActive] = useState('蘋果');
  const onChange = (value) => {
    setActive(value);
  };
  const tabList = [
    { label: "蘋果", value: "蘋果", bgColor: "#FF5252" },   // 蘋果 - 紅色
    { label: "香蕉", value: "香蕉", bgColor: "#FFC107" },   // 香蕉 - 黃色
    { label: "橘子", value: "橘子", bgColor: "#FF9800" },   // 橘子 - 橙色
    { label: "葡萄", value: "葡萄", bgColor: "#9C27B0" },   // 葡萄 - 紫色
    { label: "鳳梨", value: "鳳梨", bgColor: "#4CAF50" },   // 鳳梨 - 綠色
  ];
  const ContentView = ({ active }) => {
    const item = tabList.find(item => item.value === active);
    if (!item) return null;
    return (
      <div style={
        { 
          backgroundColor: item.bgColor,
          width: "100%",
          height: '200px'
         }
      }>
        {active === "蘋果" && <div>蘋果</div>}
        {active === "香蕉" && <div>香蕉</div>}
        {active === "橘子" && <div>橘子</div>}
        {active === "葡萄" && <div>葡萄</div>}
        {active === "鳳梨" && <div>鳳梨</div>}
      </div>
    );
  }; 
  return (
    <div>
      <h1>自定義組件</h1>
      <Tab onChange={onChange} active={active}>
        {
          tabList.map((item, index) => (
            <TabItem key={index} label={item.label} value={item.value}>
              {item.label}
            </TabItem>
          ))
        }
      </Tab>
      <Tab onChange={onChange} active={active}>
        {
          tabList.map((item, index) => (
            <Tab.Item key={index} label={item.label} value={item.value}>
              {item.label}
            </Tab.Item>
          ))
        }
      </Tab>
      <ContentView active={active} />
    </div>
  );
};
export default TestTab;