React跨组件状态控制：如何用notes.tsx的skipNotes控制panel.tsx按钮禁用？

情况1：两个组件有共同父组件 #

这是最直接的实现方式，通过状态提升将共享状态放到共同的父组件中，再通过props传递给子组件。

实现步骤： #

1. 在共同父组件中定义skipNotes状态及更新函数
2. 将状态传递给Panel组件，用于控制Button的禁用状态
3. 将更新函数传递给AddNotes组件，用于同步Switch的状态

示例代码：

// 父组件（例如 ParentComponent.tsx）
import { useState } from 'react';
import { AddNotes } from './notes';
import { Panel } from './panel';

export const ParentComponent: React.FC = () => {
  const [skipNotes, setSkipNotes] = useState(false);

  return (
    <div>
      <AddNotes skipNotes={skipNotes} onSkipNotes={setSkipNotes} />
      <Panel skipNotes={skipNotes} />
    </div>
  );
};

// notes.tsx 修改后
export const AddNotes: React.FC<{ skipNotes: boolean; onSkipNotes: (checked: boolean) => void }> = ({ skipNotes, onSkipNotes }) => {
  return (
    <div>
      <CC.ToggleSwitch 
        checked={skipNotes} 
        onChange={onSkipNotes} 
        label="Skip notes" 
        changeHighlight 
      />
    </div>
  );
};

// panel.tsx 修改后
export const Panel: React.FC<{ skipNotes: boolean }> = ({ skipNotes }) => {
  return (
    <div>
      {/* 根据需求调整禁用逻辑，示例为skipNotes为true时禁用按钮 */}
      <CC.Button text={'Submit'} disabled={skipNotes}/>
    </div>
  );
};

情况2：组件层级较深，用Context共享状态 #

如果两个组件在组件树中层级嵌套很深，传递props会非常繁琐，可以用React Context来跨层级共享状态。

实现步骤： #

1. 创建Context容器，定义状态和更新函数的类型
2. 用Provider在顶层包裹需要共享状态的组件，提供状态和更新函数
3. 在AddNotes和Panel中通过自定义Hook获取Context中的状态

示例代码：

// SkipNotesContext.tsx
import { createContext, useContext, useState, ReactNode } from 'react';

type SkipNotesContextType = {
  skipNotes: boolean;
  setSkipNotes: (checked: boolean) => void;
};

const SkipNotesContext = createContext<SkipNotesContextType | undefined>(undefined);

export const SkipNotesProvider: React.FC<{ children: ReactNode }> = ({ children }) => {
  const [skipNotes, setSkipNotes] = useState(false);

  return (
    <SkipNotesContext.Provider value={{ skipNotes, setSkipNotes }}>
      {children}
    </SkipNotesContext.Provider>
  );
};

export const useSkipNotes = () => {
  const context = useContext(SkipNotesContext);
  if (!context) {
    throw new Error('useSkipNotes必须在SkipNotesProvider内部使用');
  }
  return context;
};

// notes.tsx 修改后
import { useSkipNotes } from './SkipNotesContext';

export const AddNotes: React.FC = () => {
  const { skipNotes, setSkipNotes } = useSkipNotes();

  return (
    <div>
      <CC.ToggleSwitch 
        checked={skipNotes} 
        onChange={setSkipNotes} 
        label="Skip notes" 
        changeHighlight 
      />
    </div>
  );
};

// panel.tsx 修改后
import { useSkipNotes } from './SkipNotesContext';

export const Panel: React.FC = () => {
  const { skipNotes } = useSkipNotes();

  return (
    <div>
      <CC.Button text={'Submit'} disabled={skipNotes}/>
    </div>
  );
};

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