来自上下文提供者的道具：属性“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 = () => (

  <GlobalProvider>

    <GlobalConsumer>

  {({ toggleAuthError }: any) => (

      <Form toggleAuthError={toggleAuthError} />

    )}

</GlobalConsumer>

  </GlobalProvider>   

);

Answer 2

Form是一个标准的 HTML 标签（与 react 组件相反）。您收到此错误是因为toggleAuthError它不是Form标签的标准属性。

一个好的解决方案是坚持标准并props仅对您的反应组件使用自定义，在这种情况下可能是Form用您自己的组件包装并toggleAuthError在其上使用属性。

有时这是不可能的或根本无法维护的（比如当您使用需要直接在元素上使用此类属性的外部库时），因此另一种选择是扩展类型定义以包含您喜欢的添加项。

为此，请创建一个类型定义文件（如my-app.d.ts），然后您可以像通常使用打字稿一样添加您喜欢的定义：

declare module 'react' {

  interface HTMLAttributes<T> extends AriaAttributes, DOMAttributes<T> {

    'toggleAuthError'?: string;

  }

}