React父组件能否使用子组件props？基于Children API实现Tab组件

先直接说结论：你通过Children.map获取子组件tabTitle属性的方式完全可行，但确实不是React实现Tab组件的常规路子，下面给你拆解清楚：

为啥这个方式能行？ #

React的Children.map本来就是用来遍历子元素的，每个子元素（也就是child）的props能直接拿到传给子组件的所有参数，包括你自定义的tabTitle，所以你写的child.props.tabTitle肯定能取到值，没毛病。

为啥说这不是常规做法？ #

常规做Tab组件，一般是把标签页的所有配置（比如标题、对应内容）以props数组的形式传给父组件，而不是从子组件身上扒属性，主要有这几个原因：

• 符合React“数据往下传”的逻辑，父组件攥着所有Tab的配置，逻辑更集中，好维护
• 子组件不用扛着tabTitle这种和自身渲染无关的属性，职责更单一，子组件只管渲染自己的内容就行
• 以后要加功能，比如某个Tab禁用、加个小图标，直接在配置数组里加字段就行，不用改子组件的代码

两种实现方式给你对比下 #

你的当前方案（基于Children API） #

能正常跑，但要注意两个细节：一是得判断子组件类型，别混进来不是SubPage的组件导致报错；二是要维护当前激活的Tab索引，控制只显示对应的子组件。

给你优化后的示例代码：

import { Children, useState } from 'react';

const MainPage = ({ children }) => {
  const [activeTabIndex, setActiveTabIndex] = useState(0);

  // 提取Tab标题，同时过滤掉非SubPage的组件
  const tabTitles = Children.map(children, (child, index) => {
    if (child.type === SubPage) {
      return (
        <button
          key={index}
          onClick={() => setActiveTabIndex(index)}
          style={{
            padding: '8px 16px',
            backgroundColor: activeTabIndex === index ? '#165DFF' : '#fff',
            color: activeTabIndex === index ? '#fff' : '#333',
            border: 'none',
            cursor: 'pointer',
            marginRight: '8px'
          }}
        >
          {child.props.tabTitle}
        </button>
      );
    }
    return null;
  });

  // 拿到当前激活的Tab内容
  const activeTabContent = Children.toArray(children)[activeTabIndex];

  return (
    <div>
      <div style={{ marginBottom: '16px' }}>{tabTitles}</div>
      <div>{activeTabContent}</div>
    </div>
  );
};

const SubPage = ({ title }) => {
  return <div>当前页面内容：{title}</div>;
};

// 使用示例
const App = () => {
  return (
    <MainPage>
      <SubPage title={"1"} tabTitle="a" />
      <SubPage title={"2"} tabTitle="b" />
      <SubPage title={"3"} tabTitle="x" />
      <SubPage title={"4"} tabTitle="d" />
    </MainPage>
  );
};

export default App;

常规的配置化方案 #

把Tab的配置打包成数组传给MainPage，子组件只负责渲染内容：

import { useState } from 'react';

const MainPage = ({ tabs }) => {
  const [activeTabIndex, setActiveTabIndex] = useState(0);
  const activeTab = tabs[activeTabIndex];

  return (
    <div>
      <div style={{ marginBottom: '16px' }}>
        {tabs.map((tab, index) => (
          <button
            key={index}
            onClick={() => setActiveTabIndex(index)}
            style={{
              padding: '8px 16px',
              backgroundColor: activeTabIndex === index ? '#165DFF' : '#fff',
              color: activeTabIndex === index ? '#fff' : '#333',
              border: 'none',
              cursor: 'pointer',
              marginRight: '8px'
            }}
          >
            {tab.tabTitle}
          </button>
        ))}
      </div>
      <div>{activeTab.content}</div>
    </div>
  );
};

// 使用示例
const App = () => {
  const tabs = [
    { tabTitle: 'a', content: <div>当前页面内容：1</div> },
    { tabTitle: 'b', content: <div>当前页面内容：2</div> },
    { tabTitle: 'x', content: <div>当前页面内容：3</div> },
    { tabTitle: 'd', content: <div>当前页面内容：4</div> },
  ];

  return <MainPage tabs={tabs} />;
};

export default App;

最后总结下 #

• 你的方案完全能实现需求，适合快速做个原型或者简单场景用
• 如果是中大型项目，更推荐配置化的方案，逻辑清晰，以后加功能也方便

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