如何不通过Props导出React状态变量供其他组件调用？

你没法直接通过import timeFrame from "App.tsx"这种方式获取App组件里的timeFrame状态——React组件内的useState状态是组件实例私有的，每次组件渲染都会重新执行函数，你导出的只会是某一次渲染时的静态值，根本不会跟着状态更新同步变化，完全起不到共享状态的作用。

如果不想层层传props，最适合的就是用React官方的Context API，步骤如下：

1. 创建TimeFrame上下文 #

新建一个TimeFrameContext.tsx文件：

import { createContext, useContext, useState, ReactNode } from 'react';

// 定义上下文的类型
type TimeFrameContextType = {
  timeFrame: string;
  setTimeFrame: (value: string) => void;
};

// 创建上下文，初始值设为null，后续用Provider覆盖
const TimeFrameContext = createContext<TimeFrameContextType | null>(null);

// 自定义Provider组件，包裹需要共享状态的子组件
export function TimeFrameProvider({ children }: { children: ReactNode }) {
  const [timeFrame, setTimeFrame] = useState('daily');

  return (
    <TimeFrameContext.Provider value={{ timeFrame, setTimeFrame }}>
      {children}
    </TimeFrameContext.Provider>
  );
}

// 自定义钩子，简化子组件获取上下文的逻辑
export function useTimeFrame() {
  const context = useContext(TimeFrameContext);
  if (!context) {
    throw new Error('useTimeFrame must be used within a TimeFrameProvider');
  }
  return context;
}

2. 在App.tsx里使用Provider #

把原来的App组件内容用TimeFrameProvider包裹：

import { TimeFrameProvider } from './TimeFrameContext';

function App() {
  // 若App自身需要使用timeFrame，直接调用useTimeFrame即可
  // const { timeFrame } = useTimeFrame();

  return (
    <TimeFrameProvider>
      {/* 原App内容，比如Card组件的调用 */}
      <Card />
    </TimeFrameProvider>
  );
}

export default App;

3. 在Card.tsx里获取状态 #

通过自定义钩子直接拿到timeFrame：

import { useTimeFrame } from './TimeFrameContext';

function Card() {
  const { timeFrame } = useTimeFrame();

  // 现在可以正常使用timeFrame，且会随状态更新同步变化
  return <div>当前时间范围：{timeFrame}</div>;
}

export default Card;

如果你的项目状态逻辑复杂，也可以用Redux、Zustand这类状态管理库，但对于这种简单的跨组件共享场景，Context API完全够用，还不需要额外依赖。

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