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来使用上下文（请参阅here）。

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

Answer 2

Form是标准HTML标记（与react组件相反）。之所以出现此错误，是因为toggleAuthError不是Form标记的标准属性。

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

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

为此，创建一个类型定义文件（例如toggleAuthError），然后您可以像平常使用typescript一样添加所需的定义：

my-app.d.ts

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

2 个答案: