【问题标题】: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 属性未传递。

    【讨论】:

      猜你喜欢
      • 2017-01-30
      • 2015-02-23
      • 2022-07-02
      • 2021-08-24
      • 2013-08-22
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2018-06-26
      相关资源
      最近更新 更多