React中如何向子组件Tab传递函数props（handleChange）

你的问题出在TabHeader组件只是直接渲染子元素，没有把onChange和value传递给每个<Tab>子组件，导致Tab无法触发切换逻辑。以下是修改方案：

修改TabHeader组件 #

通过React.Children.map遍历子组件，给每个Tab添加点击事件和选中状态的props：

import React from 'react';

function TabHeader(props) {
  const { children, value, onChange, ...other } = props

  return (
    <ul>
      {React.Children.map(children, (child, index) => {
        // 仅处理Tab类型的子组件
        if (child.type === Tab) {
          return React.cloneElement(child, {
            // 标记当前Tab是否选中
            isActive: value === index,
            // 点击Tab时触发父组件的onChange，传递当前索引作为新值
            onClick: () => onChange?.(null, index),
          });
        }
        return child;
      })}
    </ul>
  )
}

调整Tab组件（示例） #

确保Tab组件能接收并使用传入的props：

function Tab(props) {
  const { label, isActive, onClick } = props;
  return (
    <li 
      onClick={onClick}
      style={{
        cursor: 'pointer',
        padding: '8px 16px',
        borderBottom: isActive ? '2px solid #1890ff' : 'none',
        fontWeight: isActive ? 'bold' : 'normal'
      }}
    >
      {label}
    </li>
  )
}

说明 #

• 用React.cloneElement克隆每个Tab子组件，注入isActive和onClick属性
• 每个Tab的索引index作为它的唯一标识，点击时将其作为newValue传递给handleChange
• isActive属性用于控制Tab的选中样式，和父组件的value状态联动

这样修改后，点击任意Tab都会触发handleChange函数，更新value状态，同时Tab会根据选中状态展示对应的样式。

内容的提问来源于stack exchange，提问作者WindCheck