React自定义tab组合组件的实例详解

const newElement = React.cloneElement(
  element,        // 要克隆的目标元素（必须是合法的 React 元素，比如 <TabItem />）
  [props],        // 可选：要新增/覆盖的 props（会和原元素 props 合并）
  [...children]   // 可选：要替换的子元素（不传则保留原元素的子元素）
);

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参数逻辑 + 补充依赖数组
  const handleClick = useCallback((value) => {
    if (value === undefined) return; // 防止空值
    setActiveTab(value);
    onChange(value);
  }, [onChange]); // 依赖数组补充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, // 直接传递函数，无需包装
        active: activeTab === child.props.value,
      });
    });
  };
  return (
    <div className={'custom-test-tab'}>
      {createdTabs()}
    </div>/
  );
};
// 3. 确保Tab.Item正确挂载
Tab.Item = TabItem;
export default 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;