🧐[问题] V5 injectIntl 注入的组件 props interface 要怎么写才能继承intl不报错？

[GloriaCHL]

🧐 问题描述

我现在场景是在一个类组件中使用 intl.formatMessage 函数做多语言处理，但是使用eslint报错了，props里的intl报错了，我不知道给什么类型或者需要继承哪个interface。希望能给个简单的示例。

💻 示例代码

我看 injectIntl 是在 umi 里暴露出来的，但是好像没见 umi 里有暴露 WrappedComponentProps 这个接口，不知道要在哪里找这个 injectIntl 的接口。

🚑 其他信息

报错信息：

No overload matches this call.
  Overload 1 of 2, '(WrappedComponent: ComponentType<WrappedComponentProps<string>>, options?: Opts<string, false> | undefined): FC<WithIntlProps<WrappedComponentProps<string>>> & { ...; }', gave the following error.
    Argument of type 'typeof FormContent' is not assignable to parameter of type 'ComponentType<WrappedComponentProps<string>>'.
      Type 'typeof FormContent' is not assignable to type 'ComponentClass<WrappedComponentProps<string>, any>'.
        Types of parameters 'props' and 'props' are incompatible.
          Type 'WrappedComponentProps<string>' is missing the following properties from type 'Readonly<FormContentProps>': dispatch, submited, close
  Overload 2 of 2, '(WrappedComponent: ComponentType<WrappedComponentProps<"intl">>, options?: Opts<"intl", true> | undefined): ForwardRefExoticComponent<Pick<WrappedComponentProps<"intl">, never> & { ...; } & RefAttributes<...>> & { ...; }', gave the following error.
    Argument of type 'typeof FormContent' is not assignable to parameter of type 'ComponentType<WrappedComponentProps<"intl">>'.
      Type 'typeof FormContent' is not assignable to type 'ComponentClass<WrappedComponentProps<"intl">, any>'.
        Types of parameters 'props' and 'props' are incompatible.
          Type 'WrappedComponentProps<"intl">' is missing the following properties from type 'Readonly<FormContentProps>': dispatch, submited, close

[chenshuai2144]

可以这么写，用 hooks 才是最香的

    interface NameFormProps {
        // Include all custom properties here.
    }

    class NameForm extends React.Component<NameFormProps & InjectedIntlProps, {}> {
        // Class body.
    }

    export default injectIntl(NameForm);

[GloriaCHL]

我就是想问 InjectedIntlProps 这个 interface 是从拿来的...可以在你这个demo里写出来一下么。是从 umi 里吗：

import { InjectedIntlProps } from 'umi'

[daiwenyang]

我就是想问 InjectedIntlProps 这个 interface 是从拿来的...可以在你这个demo里写出来一下么。是从 umi 里吗：

import { InjectedIntlProps } from 'umi'

在组件的属性里面添加属性 intl:IntlShape；引入import { IntlShape } from 'react-intl';