javascript - 来自上下文提供者的 Prop : Property 'xxx' does not exist on type 'IntrinsicAttributes & InterfaceProps'

Question

尝试将函数从上下文提供程序传递到组件时，我收到 Typescript 错误:“IntrinsicAttributes & InterfaceProps”类型上不存在属性“toggleAuthError”。ts(2322)。

上下文提供者是

interface InterfaceProps {
  children?: any;
}

interface InterfaceState {
  error: any;
  toggleAuthError: any;
}

const GlobalContext = createContext({
  error: null,
  toggleAuthError: () => {}
});

export class GlobalProvider extends React.Component<InterfaceProps, InterfaceState> {
  public toggleAuthError = ({ authError }: any) => {
    this.setState({ error: authError });
  };

  public state = {
    error: null,
    toggleAuthError: this.toggleAuthError
  };

  public render() {
    console.log(this.state);
    const { children } = this.props;
    return <GlobalContext.Provider value={this.state as any}>{children}</GlobalContext.Provider>;
  }
}

export const GlobalConsumer = GlobalContext.Consumer;

我访问该值的组件是

const SignInPageBase = () => (
  <GlobalProvider>
    {({ toggleAuthError }: any) => (
      <Form toggleAuthError={toggleAuthError} />
    )}
  </GlobalProvider>   
);

错误显示在import组件Form上。

是什么原因导致此错误以及如何修复它？我有很多类似的组件，但没有这个问题。

Answer 1

您似乎错过了 GlobalConsumer 来使用上下文(请参阅 here )。

const SignInPageBase = () => (
  <GlobalProvider>
    <GlobalConsumer>
  {({ toggleAuthError }: any) => (
      <Form toggleAuthError={toggleAuthError} />
    )}
</GlobalConsumer>
  </GlobalProvider>   
);