如何在输入占位符中使用FormattedMessage

Question

我知道这里有类似的问题：

React-Intl How to use FormattedMessage in input placeholder

但我正在使用TypeScript。

此代码：

<InputPass
  placeholder="Enter password"
/>

对我不起作用。

如何使用格式化信息设置此占位符。

public MyFragment MyFragment(){
        return this;
    }

Answer 1

您始终可以使用react-intl中的formatMessage函数。

所以你可以这样做：

<InputPass
    placeholder={intl.formatMessage("messageKey")}
/> 

如果您在使用typescript输入injectIntl​​时遇到问题。您可以执行以下操作：

interface MyComponentProps {
  /* non injected props */
}
interface MyComponentInjectedProps extends MyComponent {
  intl: InjectedIntl;
}

class MyComponent extends Component<MyComponentInjectedProps, {}> {
    ...
}

export default injectIntl<MyComponentProps>(MyComponent)

请注意我们如何将ComponentProps作为类型参数传递，因此当您使用其他地方的组件时，并不会抱怨intl属性未被传递。