React intl，将api与Typescript一起使用

我想使用react intl API的formatMessage函数插入一条消息作为占位符，但我无法找到访问此函数的正确方法

以下是我所拥有内容的简化版本：

//index.tsx
<IntlProvider locale={`fr-FR`} messages={messages_fr}>
    <NameForm/>
</IntlProvider>,

//nameForm.tsx
interface NameFormProps {
   intl?: InjectedIntlProps,
}

export default injectIntl(NameForm);

class NameForm extends React.Component<NameFormProps, {}> {

render() {
    let namePlaceholder = this.props.intl.formatMessage(
        {id: "NAME_PLACEHOLDER",
        defaultMessage: "name"
    });

    return (
        <form>
            <input placeholder={namePlaceholder} type="text"/>
        </form>
    );
}

//index.tsx
,
//nameForm.tsx
接口名称FormProps{
intl？：注入的TLPROPS，
}
导出默认injectIntl（NameForm）；
类NameForm扩展了React.Component{
render（）{
让namePlaceholder=this.props.intl.formatMessage(
{id:“NAME_占位符”，
defaultMessage：“名称”
});
返回(
);
}

我使用InjectedIntlProps作为intl prop的类型，因为IntlShape似乎并没有提供formatMessage方法

我在intl属性中添加了？是因为我一直有一个“属性'intl'丢失了”（但是injectIntl不应该返回没有这个属性的组件吗？）

现在它可以编译了，但是在运行时，我得到了一个错误（“无法读取未定义的属性'displayName'，”我猜是因为默认导出没有显式名称）

我觉得方向不对，但找不到任何typescript/react intl项目的示例

---

感谢您的帮助！

问题是由于typescript定义的版本造成的。 当使用@types/react intl“^2.2.0”时，它就像一个符咒

（编辑）使其工作所需的更改很少：

//index.tsx
<IntlProvider locale={`fr-FR`} messages={messages_fr}>
  <NameForm/>
</IntlProvider>,

//nameForm.tsx
interface NameFormProps extends InjectedIntlProps {
  placeholder: string,
}

class NameForm extends React.Component<NameFormProps, {}> {

  render() {
    let namePlaceholder = this.props.intl.formatMessage({
       id: this.props.placeholder,
       defaultMessage: "name"
      });

    return (
      <form>
        <input placeholder={namePlaceholder} type="text"/>
      </form>
    );
}

export default injectIntl(NameForm);

//index.tsx
,
//nameForm.tsx
接口NameFormProps扩展了InjectedIntlProps{
占位符：字符串，
}
类NameForm扩展了React.Component{
render（）{
让namePlaceholder=this.props.intl.formatMessage({
id:this.props.placeholder，
defaultMessage：“名称”
});
返回(
);
}
导出默认injectIntl（NameForm）；

在处理同一问题时，我发现问题中提到的将

InjectedIntrops

作为成员，或者另一个答案中提到的从它扩展，都不能满足类型检查器的要求。当从

InjectedIntrops

扩展时，对

InjectedIntl

的调用被选中，但使用resJSX中的ulting组件希望我提供一个

intl

属性。但以下策略解决了这一问题：

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

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

    export default injectIntl(NameForm);

接口名称FormProps{
//在此处包括所有自定义属性。
}
类NameForm扩展了React.Component{
//班子。
}
导出默认injectIntl（NameForm）；

现有的解决方案对我都不起作用。相反，这是因为

injectIntl

推断了包含

injectedintprops

的属性

为了修复它，我必须明确地告诉

injectIntl

被包装的组件应该有什么道具：

interface NameFormProps {
}

class NameForm extends React.Component<NameFormProps & InjectedIntlProps> {
}

export default injectIntl<NameFormProps>(NameForm);

接口名称FormProps{
}
类NameForm扩展了React.Component{
}
导出默认injectIntl（NameForm）；

如果没有道具，则需要稍微更改：

class NameForm extends React.Component<InjectedIntlProps> {
}

export default injectIntl<{}>(NameForm);

类名称表单扩展了React.Component{
}
导出默认injectIntl（NameForm）；

更新：

阅读有关的文档后，我发现它有一个更简单的方法，只需使用

useIntl

hook：

示例代码：

import { FormattedMessage, useIntl } from 'react-intl'


type Props = {
  placeholder: string,
}

function MyComponent({ placeholder }: Props) {
  const intl = useIntl()

  return (
    <input placeholder={intl.formateMessage({id: placeholder})} type="text"/>
  )
}

export default MyComponent

import { FormattedMessage, injectIntl, WrappedComponentProps } from 'react-intl'

type Props = {
  placeholder: string,
} & WrappedComponentProps

function MyComponent({ placeholder, intl }: Props) {

  return (
    <input placeholder={intl.formateMessage({id: placeholder})} type="text"/>
  )
}

export default injectIntl(MyComponent)

---

对我来说不起作用…但将“extends React.Component”更改为“extends React.PureComponent”起了作用。对我来说也很重要…导出类之后必须有“导出默认值”！我再次编辑了它。实际上，您需要将导出行放在文件的末尾，并且可以扩展“injecteditlprops”，而不是手动添加intl props