TypeScript+React中如何借助interface实现useState通过props跨组件传递

你需要将主题状态提升到Home组件维护，同时给Theme组件的Props接口补充回调函数类型定义即可，修改步骤如下：

步骤1：修改Theme组件的类型定义与实现 #

首先更新Props接口，新增onChange回调函数属性，同时移除Theme组件内部的状态，直接使用父组件传入的状态与修改方法：

export interface Props {
  theme: boolean;
  // 定义切换主题的回调类型，无入参与返回值
  onChange: () => void;
}

const Theme: FC<Props> = ({ theme, onChange }) => {
  return (
    <div>
      <div className="card__theme">
        <div className={theme ? "card__light" : "card__light--active"}>Light</div>
        <Switch 
          inputProps={{ "aria-label": "controlled" }} 
          // 点击开关直接触发父组件传入的回调
          onChange={onChange}
        />
        <div className={theme ? "card__Dark" : "card__Dark--active"}>Dark</div>
      </div>
    </div>
  );
};

步骤2：Home组件无需大改 #

你当前Home组件的传值逻辑已经符合要求，现在Theme组件补充了onChange的类型定义后，不会再出现类型报错，两边状态会完全同步：

const Home: FC = () => {
  const percentage = 91;
  // 主题状态统一在Home层维护，共享给所有子组件使用
  const [dark, setDark] = useState(false);

  return (
    <div>
      <div className="Container-body">
        <div className="card">
          <div className={dark ? "card__theme" : "card__theme--active"}>
            <Theme 
              theme={dark} 
              onChange={() => setDark(!dark)}
            />
            {/* 其余Home内组件都可以直接使用dark变量切换样式 */}
          </div>
          {/* 其余代码 */}
        </div>
      </div>
    </div>
  );
};

实现说明 #

这种遵循React单向数据流的状态提升方案，避免了父子组件各维护一份主题状态导致的数据不一致问题，所有依赖主题的组件都可以共用Home层的dark状态切换样式。

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