React中如何传递状态修改函数给组件并回传状态至父级？附TS报错解决

1. 原有思路可行性 #

你在顶层App组件通过useState管理全局变量、把状态值透传给外层Providers组件供全局注入Context、把状态更新函数传给负责修改值的UI组件的思路，完全符合React单向数据流的设计规范，是该场景下的最优轻量化方案，不需要引入额外的状态管理工具或复杂的状态流转逻辑。

2. TypeScript报错修复 #

你遇到的Property 'variable' does not exist on type 'IntrinsicAttributes & { children?: ReactNode; }'报错，根源是没有给Providers组件声明自定义props的类型：默认不带泛型参数的React.FC，只会识别内置的children属性，无法匹配你传入的variable参数。

补充说明：你之前写的...props展开写法在JS运行时是可以正常拿到variable值的，但因为没有对应的类型声明，TypeScript无法识别这个自定义属性的存在，因此抛出类型不匹配的错误。

具体修复步骤：

• 单独定义Providers组件的props类型，明确标注需要接收的variable属性类型（根据你提到的变量为数字的场景，类型设为number即可）
• 将定义好的props类型传给React.FC的泛型参数，替换默认的无属性类型
• 解构props时直接取出variable值，不需要通过展开运算符...props中转

修复后的代码示例：

// 定义Providers组件的props类型
interface ProvidersProps {
  /** 全局共享的数字变量 */
  variable: number;
}

// 将props类型传入React.FC泛型参数
const Providers: React.FC<ProvidersProps> = ({ children, variable }) => {
  return (
    <SomeProvider variableNumber={variable}>
      <AnotherProvider>{children}</AnotherProvider>
    </SomeProvider>
  )
}

3. 可选优化提示 #

如果后续全局需要共享的变量数量增多，可以把分散在App顶层的useState逻辑，统一收拢到Providers组件内部管理，只要保证变量值能正常传递给内部的Context Provider即可，不需要调整下游业务组件的取值逻辑。

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