Question

我有一个 <Providers> 功能组件包裹着所有其他应用程序组件，为所有内容提供必要的“上下文”。我需要创建一个 UI 组件来设置用户的变量，并将更改后的变量传递回 <Providers> 组件。代码如下所示：

const App: React.FC = () => {
  const [variable, setVariable] = useState(3) // The variable will be a number

  return (
    <Providers variable={variable}>
      <Router>
        <VariableChangingComponent changeVariable={setVariable} />
      </Router>
    </Providers>
  )
}

const Providers: React.FC = ({ children, ...props }) => {
  return (
    <SomeProvider variableNumber={props.variable}>
      <AnotherProvider>{children}</AnotherProvider>
    </SomeProvider>
  )
}

抱歉，这太模糊了，我不知道最好的方法应该是什么。我想我可以使用 UseState() 来声明变量，然后将该 setVariable 函数传递给 UI 组件，在那里我可以使用它来更改 variable 的状态，然后将其传递下去到 <Providers> 组件。这有任何意义吗？或者我应该以其他方式这样做吗？

我也收到了 Property 'variable' does not exist on type 'IntrinsicAttributes & { children?: ReactNode; }'. 打字稿错误。我不知道如何声明 Providers 道具的类型（我是 Typescript 的新手）。

非常感谢任何帮助。

Answer 1

如果您只使用 React.FC 而没有为 props 类型设置泛型，那么它不允许您使用除 children 和 IntrinsicAttributes 中的 props 之外的任何其他 props。

您需要声明您的 Providers 组件需要一个属性 variable，它是一个 number。我也在解构它而不是使用 props.variable，但这实际上并不重要。

const Providers: React.FC<{variable: number}> = ({ children, variable }) => {
  return (
    <SomeProvider variableNumber={variable}>
      <AnotherProvider>{children}</AnotherProvider>
    </SomeProvider>
  )
}

我内联声明了 props 对象的类型，因为我们这里只有一个 prop。你也可以像这样为 props 创建一个命名类型或接口：

interface ProvidersProps {
  variable: number;
}

const Providers: React.FC<ProvidersProps> = ({ children, variable }) => {
...

如何将状态更改函数传递给组件，然后将该状态传递给父组件？

1 个答案: