React.js：如何将Layout组件状态传递给NotSignedInHero组件

1. Props层层传递（最直接的基础方案） #

因为Layout是所有组件的父容器，App被Layout包裹，NotSignedInHero又由App渲染，所以可以直接通过props把状态逐层传递：

Layout组件代码示例： #

import { useState } from 'react';
import App from './App';

const Layout = () => {
  const [passed, setPassed] = useState('pass this');

  // 将状态和更新函数作为props传给App
  return <App passed={passed} setPassed={setPassed} />;
};

export default Layout;

App组件代码示例： #

import SignedInHero from './SignedInHero';
import NotSignedInHero from './NotSignedInHero';

interface AppProps {
  passed: string;
  setPassed: React.Dispatch<React.SetStateAction<string>>;
}

const App = ({ passed, setPassed }: AppProps) => {
  const isConnected = false; // 假设的连接状态

  return (
    <div>
      {isConnected ? (
        <SignedInHero />
      ) : (
        // 把从Layout拿到的props传给NotSignedInHero
        <NotSignedInHero passed={passed} setPassed={setPassed} />
      )}
    </div>
  );
};

export default App;

NotSignedInHero组件代码示例： #

interface NotSignedInHeroProps {
  passed: string;
  setPassed: React.Dispatch<React.SetStateAction<string>>;
}

const NotSignedInHero = ({ passed, setPassed }: NotSignedInHeroProps) => {
  return (
    <div>
      <p>从Layout传来的状态：{passed}</p>
      <button onClick={() => setPassed('new value')}>更新状态</button>
    </div>
  );
};

export default NotSignedInHero;

2. Context API（避免props drilling的优雅方案） #

如果后续有更多组件需要用到这个状态，或者组件层级很深，用Context可以避免逐层传props的冗余：

第一步：创建Context #

新建LayoutContext.tsx文件：

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

interface LayoutContextType {
  passed: string;
  setPassed: React.Dispatch<React.SetStateAction<string>>;
}

// 创建Context，默认值设为null，后续用Provider提供实际值
const LayoutContext = createContext<LayoutContextType | null>(null);

// 自定义Hook，简化Context消费逻辑
export const useLayoutContext = () => {
  const context = useContext(LayoutContext);
  if (!context) {
    throw new Error('useLayoutContext必须在LayoutContext.Provider内部使用');
  }
  return context;
};

// 定义Provider组件，包裹子组件并提供状态
export const LayoutProvider = ({ children }: { children: ReactNode }) => {
  const [passed, setPassed] = useState('pass this');

  return (
    <LayoutContext.Provider value={{ passed, setPassed }}>
      {children}
    </LayoutContext.Provider>
  );
};

第二步：在Layout中使用Provider #

import { LayoutProvider } from './LayoutContext';
import App from './App';

const Layout = () => {
  return (
    <LayoutProvider>
      {/* 这里可以放Layout的固定布局元素，比如导航栏、页脚 */}
      <App />
    </LayoutProvider>
  );
};

export default Layout;

第三步：在NotSignedInHero中消费Context #

import { useLayoutContext } from './LayoutContext';

const NotSignedInHero = () => {
  const { passed, setPassed } = useLayoutContext();

  return (
    <div>
      <p>从Layout通过Context传来的状态：{passed}</p>
      <button onClick={() => setPassed('updated via context')}>更新状态</button>
    </div>
  );
};

export default NotSignedInHero;

这种方式下，App组件无需再传递该状态的props，NotSignedInHero可直接从Context中获取状态。

3. 状态管理库（复杂应用推荐） #

如果应用状态逻辑复杂，或有大量跨组件状态共享需求，可以用Redux、Zustand、Jotai这类状态管理库，将状态放到全局store中：

示例：用Zustand创建全局store #

import { create } from 'zustand';

interface LayoutStore {
  passed: string;
  setPassed: (value: string) => void;
}

export const useLayoutStore = create<LayoutStore>((set) => ({
  passed: 'pass this',
  setPassed: (value) => set({ passed: value }),
}));

Layout中更新状态（可选，任何组件都可直接更新） #

import { useLayoutStore } from './layoutStore';
import App from './App';

const Layout = () => {
  const setPassed = useLayoutStore((state) => state.setPassed);

  // 这里可直接调用setPassed更新状态
  return <App />;
};

export default Layout;

NotSignedInHero中使用状态 #

import { useLayoutStore } from './layoutStore';

const NotSignedInHero = () => {
  const passed = useLayoutStore((state) => state.passed);
  const setPassed = useLayoutStore((state) => state.setPassed);

  return (
    <div>
      <p>从全局store获取的状态：{passed}</p>
      <button onClick={() => setPassed('updated via zustand')}>更新状态</button>
    </div>
  );
};

export default NotSignedInHero;

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