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

【问题标题】：How to use FormattedMessage in input placeholder如何在输入占位符中使用 FormattedMessage
【发布时间】：2018-03-30 04:58:10
【问题描述】：

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

React-Intl How to use FormattedMessage in input placeholder

但我使用的是 TypeScript。

这段代码：

import { injectIntl, intlShape } from 'react-intl';

ChildComponent.propTypes = {
  intl: intlShape.isRequired
}

对我不起作用。

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

<InputPass
  placeholder="Enter password"
/>

【问题讨论】：

标签： reactjs typescript react-intl

【解决方案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 属性未传递。

【讨论】：