React标签组件：如何在TabsPanel中复用TabsLabel的state值？

首先要明确：你想在TabsPanel中直接访问TabsLabel的state是不可行的，而且这确实是React中的反模式。因为React组件的state是内部私有状态，只能由组件自身管理和访问，其他组件无法直接获取或修改另一个组件的state。你当前的代码里，TabsPanel根本没有this.state.activeTab这个属性，直接写会报错。

为什么这是反模式？ #

• 违反了组件封装原则：每个组件应该只关注自己的内部状态，跨组件直接访问状态会让代码耦合度变高，难以维护和调试。
• 不符合React的单向数据流理念：数据应该从父组件流向子组件，而不是子组件之间直接共享状态。

正确的做法：状态提升（Lifting State Up） #

React官方推荐的跨组件共享状态的方式是把共享状态提升到它们共同的父组件中，然后通过props将状态和回调函数传递给子组件。这样所有相关组件都能基于同一个数据源工作，保证状态的一致性。

下面是修改后的完整实现：

1. 重构Tabs组件文件

首先修改你的Tabs组件，移除TabsLabel内部的state，让它通过props接收点击回调和激活状态：

import React, { Component } from 'react';

export class TabsLabel extends Component {
  render() {
    // 可以根据isActive添加激活样式，提升用户体验
    const tabClassName = this.props.isActive ? "active-tab" : "";
    
    return (
      <s-tab 
        className={tabClassName}
        onClick={this.props.onTabClick} 
        id={`tab-${this.props.labelNumber}`} 
        aria-controls={`panel-${this.props.labelNumber}`}
      >
        {this.props.children}
      </s-tab>
    );
  }
}

export class TabsPanel extends Component {
  render() {
    const { isActive, panelNumber } = this.props;
    
    return (
      <div 
        id={`panel-${panelNumber}`} 
        role="tabpanel" 
        aria-labelledby={`tab-${panelNumber}`}
        tabindex="0"
        hidden={!isActive}
      >
        {this.props.children}
      </div>
    );
  }
}

// 无需默认导出两个组件，父组件按需导入即可

2. 创建父组件管理状态

在使用TabsLabel和TabsPanel的父组件中，维护activeTab的状态，并提供切换tab的回调函数：

import React, { Component } from 'react';
import { TabsLabel, TabsPanel } from './Tabs';

class TabContainer extends Component {
  constructor(props) {
    super(props);
    // 初始化激活的tab，这里默认设为第一个
    this.state = { activeTab: "1" };
    // 绑定回调函数的this指向
    this.handleTabClick = this.handleTabClick.bind(this);
  }

  handleTabClick(tabNumber) {
    this.setState({ activeTab: tabNumber });
  }

  render() {
    const { activeTab } = this.state;
    
    return (
      <div className="tabs-container">
        <TabsLabel 
          labelNumber="1"
          isActive={activeTab === "1"}
          onTabClick={() => this.handleTabClick("1")}
        >Label 1</TabsLabel>
        <TabsLabel 
          labelNumber="2"
          isActive={activeTab === "2"}
          onTabClick={() => this.handleTabClick("2")}
        >Label 2</TabsLabel>

        <TabsPanel 
          panelNumber="1"
          isActive={activeTab === "1"}
        >
          <p>Panel content 1</p>
        </TabsPanel>
        <TabsPanel 
          panelNumber="2"
          isActive={activeTab === "2"}
        >
          <p>Panel content 2</p>
        </TabsPanel>
      </div>
    );
  }
}

export default TabContainer;

额外优化点 #

• 修复了你原代码中TabsPanel的id硬编码问题：现在每个面板的id和标签的aria-controls对应，更符合Web无障碍标准。
• 给TabsLabel添加了激活状态的className，方便你添加样式区分当前选中的标签。
• 统一了状态管理，所有组件的状态都由父组件控制，保证了数据一致性。

这种方式不仅解决了你的问题，还让组件结构更清晰，复用性更强，完全符合React的设计原则。

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