如何从父组件获取Tabs子组件的子组件状态值并跨Tab访问？

针对你提出的两个问题，答案都是可以实现，下面分场景给出具体实现方式：

一、父组件访问孙组件的状态 #

最常用的两种方案是状态提升和回调逐层传递，复杂场景也可以用React Context。

1. 状态提升（推荐，符合React单向数据流） #

把孙组件的状态直接提到父组件中，再通过props传递给孙组件和Tabs组件，孙组件只负责触发状态更新：

// 父组件 Parent.js
import { useState } from 'react';
import Tabs from './Tabs';

function Parent() {
  // 将孙组件的状态提升到父组件
  const [grandChildState, setGrandChildState] = useState('初始值');

  return (
    <div className="parent">
      <Tabs 
        grandChildState={grandChildState}
        setGrandChildState={setGrandChildState}
      />
      {/* 父组件直接使用孙组件的状态 */}
      <p>孙组件当前状态：{grandChildState}</p>
    </div>
  );
}

// Tabs组件 Tabs.js
import Tab1 from './Tab1'; // 持有原状态的孙组件
import Tab2 from './Tab2';

function Tabs({ grandChildState, setGrandChildState }) {
  return (
    <div className="tabs">
      <Tab1 
        state={grandChildState}
        setState={setGrandChildState}
      />
      <Tab2 />
    </div>
  );
}

// 孙组件 Tab1.js
function Tab1({ state, setState }) {
  return (
    <div className="tab1">
      <input 
        value={state}
        onChange={(e) => setState(e.target.value)}
        placeholder="修改状态"
      />
    </div>
  );
}

2. 回调逐层传递（适合不想提升状态的简单场景） #

如果不想把状态提到父组件，可以让孙组件通过Tabs组件把状态传递给父组件：

// 父组件 Parent.js
import { useState } from 'react';
import Tabs from './Tabs';

function Parent() {
  const [receivedState, setReceivedState] = useState('');

  // 接收孙组件传递的状态
  const handleGrandChildStateChange = (newState) => {
    setReceivedState(newState);
  };

  return (
    <div className="parent">
      <Tabs onGrandChildStateChange={handleGrandChildStateChange} />
      <p>从孙组件获取的状态：{receivedState}</p>
    </div>
  );
}

// Tabs组件 Tabs.js
import Tab1 from './Tab1';

function Tabs({ onGrandChildStateChange }) {
  // 转发父组件的回调给孙组件
  return (
    <div className="tabs">
      <Tab1 onStateChange={onGrandChildStateChange} />
    </div>
  );
}

// 孙组件 Tab1.js
import { useState } from 'react';

function Tab1({ onStateChange }) {
  const [localState, setLocalState] = useState('初始值');

  const handleChange = (e) => {
    const newState = e.target.value;
    setLocalState(newState);
    // 触发回调传递状态给父组件
    onStateChange(newState);
  };

  return (
    <div className="tab1">
      <input value={localState} onChange={handleChange} />
    </div>
  );
}

二、其他标签页子组件访问该状态 #

可以用状态提升或React Context实现：

1. 基于状态提升的方案 #

把状态放在父组件，Tabs组件将状态传递给所有需要的标签页子组件：

// Tabs组件 Tabs.js
import Tab1 from './Tab1';
import Tab2 from './Tab2';

function Tabs({ grandChildState, setGrandChildState }) {
  return (
    <div className="tabs">
      <Tab1 
        state={grandChildState}
        setState={setGrandChildState}
      />
      {/* 把状态传递给Tab2 */}
      <Tab2 sharedState={grandChildState} />
    </div>
  );
}

// Tab2组件 Tab2.js
function Tab2({ sharedState }) {
  return (
    <div className="tab2">
      <p>来自Tab1的状态：{sharedState}</p>
    </div>
  );
}

2. React Context方案（适合多组件跨层级共享） #

如果标签页多、层级复杂，用Context可以避免props层层传递：

// 创建Context StateContext.js
import { createContext, useContext, useState } from 'react';

const StateContext = createContext();

export function StateProvider({ children }) {
  const [sharedState, setSharedState] = useState('初始值');

  return (
    <StateContext.Provider value={{ sharedState, setSharedState }}>
      {children}
    </StateContext.Provider>
  );
}

export function useSharedState() {
  return useContext(StateContext);
}

// 父组件 Parent.js
import { StateProvider } from './StateContext';
import Tabs from './Tabs';

function Parent() {
  return (
    <StateProvider>
      <div className="parent">
        <Tabs />
      </div>
    </StateProvider>
  );
}

// 孙组件 Tab1.js
import { useSharedState } from './StateContext';

function Tab1() {
  const { sharedState, setSharedState } = useSharedState();

  return (
    <div className="tab1">
      <input 
        value={sharedState}
        onChange={(e) => setSharedState(e.target.value)}
      />
    </div>
  );
}

// 其他标签页组件 Tab2.js
import { useSharedState } from './StateContext';

function Tab2() {
  const { sharedState } = useSharedState();

  return (
    <div className="tab2">
      <p>共享状态：{sharedState}</p>
    </div>
  );
}

总结：

• 简单场景优先用状态提升，符合React设计理念；
• 复杂跨层级共享用React Context，避免props冗余传递；
• 尽量避免用ref直接访问子组件状态（违反单向数据流，不利于维护）。

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