react 18+react queryで、QueryプロバイダでInterinsicAttributesエラーが発生した場合、この問題をどのように解決しますか?

React 17とReact 18の機能コンポーネントインタフェースが異なることによるエラー.

React 17の機能コンポーネントインタフェース

interface FunctionComponent<P = {}> {
        (props: PropsWithChildren<P>, context?: any): ReactElement<any, any> | null;
        propTypes?: WeakValidationMap<P> | undefined;
        contextTypes?: ValidationMap<any> | undefined;
        defaultProps?: Partial<P> | undefined;
        displayName?: string | undefined;
    }

React 18の機能コンポーネントインタフェース

interface FunctionComponent<P = {}> {
        (props: P, context?: any): ReactElement<any, any> | null;
        propTypes?: WeakValidationMap<P> | undefined;
        contextTypes?: ValidationMap<any> | undefined;
        defaultProps?: Partial<P> | undefined;
        displayName?: string | undefined;
    }

QueryClientProviderのインタフェースがReact 17規格に適合しているため発生する.
したがって、React 17規格に再調整すればよい.

1.ルートにインデックスを付けます。d.tsファイル作成

2.次のコードを挿入

import 'react'

declare module 'react' {
  export type FC<P = {}> = FunctionComponent<P>
  export interface FunctionComponent<P = {}> {
    (props: PropsWithChildren<P>, context?: any): ReactElement<any, any> | null
    propTypes?: WeakValidationMap<P> | undefined
    contextTypes?: ValidationMap<any> | undefined
    defaultProps?: Partial<P> | undefined
    displayName?: string | undefined
  }
}

これは,応答バージョン更新ファッションがインタフェース互換性の面で更新されていないためと推測される.