React/TypeScript：嵌套子组件获取的数据能否供父组件使用？

可行，不需要必须在React-component-1中直接获取数据，你可以通过几种常见的React状态管理方案，让深层组件获取的GraphQL数据传递到顶层组件使用，以下是具体实现方式：

1. 状态提升（State Lifting） #

这是React最基础的状态传递方式，适合组件层级较浅的场景：

• 核心思路：在顶层的React-component-1中定义状态和状态更新方法，通过props逐层传递到React-component-4；当React-component-4获取到GraphQL数据后，调用传递过来的方法更新顶层组件的状态。

示例代码：

// React-component-1
import { useState } from 'react';

function ReactComponent1() {
  const [component4Data, setComponent4Data] = useState(null);

  // 直接使用component4Data
  return <ReactComponent2 onDataReceived={setComponent4Data} />;
}

// React-component-2
function ReactComponent2({ onDataReceived }) {
  return <ReactComponent3 onDataReceived={onDataReceived} />;
}

// React-component-3
function ReactComponent3({ onDataReceived }) {
  return <ReactComponent4 onDataReceived={onDataReceived} />;
}

// React-component-4（执行GraphQL查询）
import { useQuery } from '@apollo/client';
import GET_TARGET_DATA from './queries/getTargetData';

function ReactComponent4({ onDataReceived }) {
  const { data, loading, error } = useQuery(GET_TARGET_DATA);

  if (loading) return <div>加载中...</div>;
  if (error) return <div>数据加载失败</div>;

  // 数据获取后传递给顶层组件
  if (data) onDataReceived(data);

  return <ReactComponent5 />;
}

2. Context API #

如果组件层级很深，逐层传递props会出现「props drilling」（属性透传）的冗余问题，这时可以用React内置的Context API实现跨层级状态传递：

• 核心思路：创建一个全局Context，在顶层组件（或更外层的Provider）中提供状态和更新方法；React-component-4直接消费这个Context，将获取到的GraphQL数据更新到全局状态，React-component-1再从Context中读取数据。

示例代码：

// 新建DataContext.js
import { createContext, useContext, useState } from 'react';

const DataContext = createContext();

export function DataProvider({ children }) {
  const [component4Data, setComponent4Data] = useState(null);
  return (
    <DataContext.Provider value={{ component4Data, setComponent4Data }}>
      {children}
    </DataContext.Provider>
  );
}

export function useDataContext() {
  return useContext(DataContext);
}

// 在App或外层组件包裹Provider
function App() {
  return (
    <DataProvider>
      <ReactComponent1 />
    </DataProvider>
  );
}

// React-component-1
import { useDataContext } from './DataContext';

function ReactComponent1() {
  const { component4Data } = useDataContext();
  // 使用component4Data
  return <ReactComponent2 />;
}

// React-component-4
import { useQuery } from '@apollo/client';
import GET_TARGET_DATA from './queries/getTargetData';
import { useDataContext } from './DataContext';

function ReactComponent4() {
  const { data, loading, error } = useQuery(GET_TARGET_DATA);
  const { setComponent4Data } = useDataContext();

  if (loading) return <div>加载中...</div>;
  if (error) return <div>数据加载失败</div>;

  if (data) setComponent4Data(data);

  return <ReactComponent5 />;
}

3. 状态管理库（如Redux、Zustand） #

如果项目需要复杂的全局状态管理，或者多个组件都需要共享这份数据，可以使用专门的状态管理库：

• 以轻量库Zustand为例，核心思路是将数据存入全局Store，React-component-4更新Store，React-component-1从Store中读取数据。

示例代码：

// 新建store.js
import { create } from 'zustand';

const useDataStore = create((set) => ({
  component4Data: null,
  setComponent4Data: (data) => set({ component4Data: data }),
}));

// React-component-1
import useDataStore from './store';

function ReactComponent1() {
  const component4Data = useDataStore((state) => state.component4Data);
  // 使用component4Data
  return <ReactComponent2 />;
}

// React-component-4
import { useQuery } from '@apollo/client';
import GET_TARGET_DATA from './queries/getTargetData';
import useDataStore from './store';

function ReactComponent4() {
  const { data, loading, error } = useQuery(GET_TARGET_DATA);
  const setComponent4Data = useDataStore((state) => state.setComponent4Data);

  if (loading) return <div>加载中...</div>;
  if (error) return <div>数据加载失败</div>;

  if (data) setComponent4Data(data);

  return <ReactComponent5 />;
}

方案选择建议 #

• 组件层级较浅：优先使用状态提升，实现简单无额外依赖
• 层级深但不想引入第三方库：使用Context API
• 大型项目或需复杂状态交互：使用状态管理库

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