来自上下文提供者的道具：属性“xxx”在类型“IntrinsicAttributes ”

Question

我Property 'toggleAuthError' does not exist on type 'IntrinsicAttributes & InterfaceProps'.ts(2322)在尝试将函数从上下文提供程序传递到组件时遇到 Typescript 错误。

上下文提供者是

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使用上下文的机会（请参阅此处）。const SignInPageBase = () => (&nbsp; <GlobalProvider>&nbsp; &nbsp; <GlobalConsumer>&nbsp; {({ toggleAuthError }: any) => (&nbsp; &nbsp; &nbsp; <Form toggleAuthError={toggleAuthError} />&nbsp; &nbsp; )}</GlobalConsumer>&nbsp; </GlobalProvider>&nbsp; &nbsp;);

Answer 2

Form是一个标准的 HTML 标签（与 react 组件相反）。您收到此错误是因为toggleAuthError它不是Form标签的标准属性。一个好的解决方案是坚持标准并props仅对您的反应组件使用自定义，在这种情况下可能是Form用您自己的组件包装并toggleAuthError在其上使用属性。有时这是不可能的或根本无法维护的（比如当您使用需要直接在元素上使用此类属性的外部库时），因此另一种选择是扩展类型定义以包含您喜欢的添加项。为此，请创建一个类型定义文件（如my-app.d.ts），然后您可以像通常使用打字稿一样添加您喜欢的定义：declare module 'react' {&nbsp; interface HTMLAttributes<T> extends AriaAttributes, DOMAttributes<T> {&nbsp; &nbsp; 'toggleAuthError'?: string;&nbsp; }}